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

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

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