关于本站的表情解析的解决方案

2020-08-31 20:47:00
 折腾时间

刚才在群里有小伙伴询问本站的表情解析的功能是如何实现的。其实这个功能实现起来,也是一个比较取巧的办法。下面就水一文,介绍一下。

function.php 处理表情

如果用过Typecho 使用 fancybox 踩过的坑这篇文章里的方案的话,可以直接接着在这篇文章里的parseContent()的这个function里继续写。需要注意的是,这个文章中这个 function 中使用的形参名称为$obj,被处理的内容为$obj->content。所以,大可以在parseContent()函数体内继续处理$obj->content

如果没用过的话。自己也单写一个parseContent()也是可以的。
因为之前用这个 function 的时候,在主题post.php的引用方式为将$this->content替换为parseContent($this),故不与评论区里的解析通用(屎山+1)

文章内的 function 如下

function parseContent($obj){
    /*此处可以任意处理 $obj->content*/
    $obj->content = preg_replace_callback('/@\[(.*?)\]/is', 'forEmotionReplace', $obj->content);
    /*此处也可以接着蹂躏 $obj->content*/
}

评论区的 function 如下

function parseCommentText($obj){
    /*此处可以任意处理 $obj*/
    $obj = preg_replace_callback('/@\[(.*?)\]/is', 'forEmotionReplace', $obj->content);
    /*此处也可以接着蹂躏 $obj*/
}

评论区内,在你的【自定义评论结构】里,将$comments->content()替换成parseCommentText($comments->content)

然后大家也注意到了,表情的格式为@防止被解析[$1]。这两个里面都有一个forEmotionReplace的东西,说明这两个都需要这个。关于这个的东西如下,需要写在这两个的下面。

function forEmotionReplace($matches){
    return '<img style="vertical-align:middle;height:20px;width:20px;display: inline-block;margin: unset;" src="/usr/uploads/emotions/'.base64_encode($matches[1]).'.png" alt="'.$matches[0].'" />';
    /* 里面的图片路径请自行解决 */
}

基本的思路就是,比如说我发了个表情,会把表情识别结构里的文字给转码成 base64 格式的,然后用这个 base64 拼接出表情的真实地址,然后对文章内的关键字进行替换。所以说,你要准备的表情文件夹里的表情,全部都要重命名为 base64_encode 后的文本!!!

前端方面

我这边的方法是把文件夹里已有的表情,全都手动手写成一起,然后进行添加。
然后关于前端页面插入图片的过程...在此概述
祖传传统,依赖jQuery!!!

首先,引入一个 jQ 的新方法(应该是这个叫法吧qwq)。如下:(也是从百度抄来的,来源早都忘了)
注意:最好在 jQ 引用完之后 再进行引用

        (function($) {
            $.fn.extend({
                insertAtCaret: function(myValue) {
                    var $t = $(this)[0];
                    if (document.selection) {
                        this.focus();
                        sel = document.selection.createRange();
                        sel.text = myValue;
                        this.focus();
                    } else
                    if ($t.selectionStart || $t.selectionStart == '0') {
                        var startPos = $t.selectionStart;
                        var endPos = $t.selectionEnd;
                        var scrollTop = $t.scrollTop;
                        $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
                        this.focus();
                        $t.selectionStart = startPos + myValue.length;
                        $t.selectionEnd = startPos + myValue.length;
                        $t.scrollTop = scrollTop;
                    } else {
                        this.value += myValue;
                        this.focus();
                    }
                }
            })
        })(jQuery);

然后,对点击表情框内的图片,然后进行插入的这个动作,进行实现:

/*表情框*/
$(document).ready(function() {
    /* 下方的选择器,应该选择到你表情选择框里的表情图片,或者是其他 */
    $(".OwO-self .OwO-drop img").click(function() {
        /* 下方的选择器,应选择到你的输入评论内容的评论框 */
        $(".OwO-textarea").insertAtCaret($(this).attr("alt"));
    });
});

然后我这边的表情选择框内的每个 unit 的表情的 html 是这样的

<img src="/usr/uploads/emotions/5aSn5ZOt.png" alt="@防止被解析[大哭]" title="大哭">

技术总结

然后,只要左左右右,然后上上下下,然后就弄好了@[受虐滑稽]。祝各位成功qwq