吐槽

更改原因有几点：

  • 多说官方表情实在太丑，实在太丑，根本已经跟不上新时代的潮流了，完全不懂多说官方为什么要把那么多不好看表情堆在一起==。
  • 表情框不能自适应！在手机上，整个页面根本没法看！瞎==
  • 表情框错位，表情框左边总是长了一截，应该是和主题的部分css冲突还是咋滴。。。发现有些博客也有这个问题

说明

原理及实现方法

其实很简单，就是增加了一个表情框的div。去掉以前的多说表情的显示。新的表情框设计原理：

  1. 增加一个facemenu的按钮，并用“hideface()”实现点开图标打开表情框事件：
  2. 增加一个facediv表情框，并定义好初始css
  3. 在表情框内用insertFace 函数实现点击图片插入相应的html代码

所以，只要修改这几处就行了！

  • 第一处修改

搜索

e.options.use_smilies && (t += '<a class="ds-toolbar-button ds-add-emote" title="插入表情"></a>'),

替换成

            e.options.use_smilies && (t += '<div class="facemenu" onclick="hideface()"><img src="https://www.ihewro.com/duoshuo/smiles/face.png"/></div><div class="facediv" id="facediv" style="display:none;padding: 10px;background-color: #eee;border-radius: 5px;">   <span onclick="insertFace(1)"><img src="https://www.ihewro.com/duoshuo/smiles/1.png" /></span>   <span onclick="insertFace(2)"><img src="https://www.ihewro.com/duoshuo/smiles/2.png" /></span>   <span onclick="insertFace(3)"><img src="https://www.ihewro.com/duoshuo/smiles/3.png" /></span>   <span onclick="insertFace(4)"><img src="https://www.ihewro.com/duoshuo/smiles/4.png" /></span>   <span onclick="insertFace(5)"><img src="https://www.ihewro.com/duoshuo/smiles/5.png" /></span>   <span onclick="insertFace(6)"><img src="https://www.ihewro.com/duoshuo/smiles/6.png" /></span>   <span onclick="insertFace(7)"><img src="https://www.ihewro.com/duoshuo/smiles/7.png" /></span>   <span onclick="insertFace(8)"><img src="https://www.ihewro.com/duoshuo/smiles/8.png" /></span>   <span onclick="insertFace(9)"><img src="https://www.ihewro.com/duoshuo/smiles/9.png" /></span>   <span onclick="insertFace(10)"><img src="https://www.ihewro.com/duoshuo/smiles/10.png" /></span>   <span onclick="insertFace(11)"><img src="https://www.ihewro.com/duoshuo/smiles/11.png" /></span>   <span onclick="insertFace(12)"><img src="https://www.ihewro.com/duoshuo/smiles/12.png" /></span>   <span onclick="insertFace(13)"><img src="https://www.ihewro.com/duoshuo/smiles/13.png" /></span>   <span onclick="insertFace(14)"><img src="https://www.ihewro.com/duoshuo/smiles/14.png" /></span>   <span onclick="insertFace(15)"><img src="https://www.ihewro.com/duoshuo/smiles/15.png" /></span>   <span onclick="insertFace(16)"><img src="https://www.ihewro.com/duoshuo/smiles/16.png" /></span>   <span onclick="insertFace(17)"><img src="https://www.ihewro.com/duoshuo/smiles/17.png" /></span>   <span onclick="insertFace(18)"><img src="https://www.ihewro.com/duoshuo/smiles/18.png" /></span>   <span onclick="insertFace(19)"><img src="https://www.ihewro.com/duoshuo/smiles/19.png" /></span>   <span onclick="insertFace(20)"><img src="https://www.ihewro.com/duoshuo/smiles/20.png" /></span>   <span onclick="insertFace(21)"><img src="https://www.ihewro.com/duoshuo/smiles/21.png" /></span>   <span onclick="insertFace(22)"><img src="https://www.ihewro.com/duoshuo/smiles/22.png" /></span>   <span onclick="insertFace(23)"><img src="https://www.ihewro.com/duoshuo/smiles/23.png" /></span>   <span onclick="insertFace(24)"><img src="https://www.ihewro.com/duoshuo/smiles/24.png" /></span>   <span onclick="insertFace(25)"><img src="https://www.ihewro.com/duoshuo/smiles/25.png" /></span>   <span onclick="insertFace(26)"><img src="https://www.ihewro.com/duoshuo/smiles/26.png" /></span>   <span onclick="insertFace(27)"><img src="https://www.ihewro.com/duoshuo/smiles/27.png" /></span>   <span onclick="insertFace(28)"><img src="https://www.ihewro.com/duoshuo/smiles/28.png" /></span>   <span onclick="insertFace(29)"><img src="https://www.ihewro.com/duoshuo/smiles/29.png" /></span>   <span onclick="insertFace(30)"><img src="https://www.ihewro.com/duoshuo/smiles/30.png" /></span>   <span onclick="insertFace(31)"><img src="https://www.ihewro.com/duoshuo/smiles/31.png" /></span>   <span onclick="insertFace(32)"><img src="https://www.ihewro.com/duoshuo/smiles/32.png" /></span>   <span onclick="insertFace(33)"><img src="https://www.ihewro.com/duoshuo/smiles/33.png" /></span>   <span onclick="insertFace(34)"><img src="https://www.ihewro.com/duoshuo/smiles/34.png" /></span>   <span onclick="insertFace(35)"><img src="https://www.ihewro.com/duoshuo/smiles/35.png" /></span>   <span onclick="insertFace(36)"><img src="https://www.ihewro.com/duoshuo/smiles/36.png" /></span>   <span onclick="insertFace(37)"><img src="https://www.ihewro.com/duoshuo/smiles/37.png" /></span>   <span onclick="insertFace(38)"><img src="https://www.ihewro.com/duoshuo/smiles/38.png" /></span>   <span onclick="insertFace(39)"><img src="https://www.ihewro.com/duoshuo/smiles/39.png" /></span>   <span onclick="insertFace(40)"><img src="https://www.ihewro.com/duoshuo/smiles/40.png" /></span>   <span onclick="insertFace(41)"><img src="https://www.ihewro.com/duoshuo/smiles/41.png" /></span>   <span onclick="insertFace(42)"><img src="https://www.ihewro.com/duoshuo/smiles/42.png" /></span>   <span onclick="insertFace(43)"><img src="https://www.ihewro.com/duoshuo/smiles/43.png" /></span>   <span onclick="insertFace(44)"><img src="https://www.ihewro.com/duoshuo/smiles/44.png" /></span>   <span onclick="insertFace(45)"><img src="https://www.ihewro.com/duoshuo/smiles/45.png" /></span>   <span onclick="insertFace(46)"><img src="https://www.ihewro.com/duoshuo/smiles/46.png" /></span>   <span onclick="insertFace(47)"><img src="https://www.ihewro.com/duoshuo/smiles/47.png" /></span>   <span onclick="insertFace(48)"><img src="https://www.ihewro.com/duoshuo/smiles/48.png" /></span>   <span onclick="insertFace(49)"><img src="https://www.ihewro.com/duoshuo/smiles/49.png" /></span>   <span onclick="insertFace(50)"><img src="https://www.ihewro.com/duoshuo/smiles/50.png" /></span>    <span onclick="closeface()">    <img src="https://www.ihewro.com/duoshuo/smiles/close.png" style="float:right;" />   </span>   </div>'
            
            ),
  • 第二处修改

在js文件最底下增加两个函数就行了

    function closeface(){
        document.getElementById('facediv').style.display='none'
        document.getElementById('facemenubar').style.minHeight='10px';
    }
    function hideface(){
        if(document.getElementById('facediv').style.display=='block')
        {
            closeface()
        }
        else{
        document.getElementById('facediv').style.display='block';
        document.getElementById('facemenubar').style.minHeight=document.getElementById('facediv').offsetHeight+"px";
        }
    }
    var facecodestart="<img src='https://www.ihewro.com/duoshuo/smiles/";
var facecodeend= ".png'  >";
function insertFace(faceid) { //插入函数
var textname=document.getElementsByName("message");
var textid=textname[0];     //插入到name为message的第一个标签
//兼容IE
faceid=facecodestart+ faceid+facecodeend;
if (document.selection) {
textid.focus();
sel = document.selection.createRange();
sel.text =faceid;
sel.select();
}
//IE部分结束 
else if (textid.selectionStart || textid.selectionStart == '0') {
var startPos = textid.selectionStart;
var endPos = textid.selectionEnd;
var restoreTop = textid.scrollTop;
textid.value = textid.value.substring(0, startPos) + faceid + 
textid.value.substring(endPos, textid.value.length);
if (restoreTop > 0) {
textid.scrollTop = restoreTop;
}
textid.focus();
textid.selectionStart = startPos + faceid.length;
textid.selectionEnd = startPos + faceid.length;
} else {
textid.value += faceid;
textid.focus();
}
}

一切就OK！

你也可以下载我的js，把所有的https://www.ihewro.com/duoshuo/smiles/改成你的泡泡表情上传目录如：http://xxxxx.com/paopao/

smiles表情包下载：链接：http://pan.baidu.com/s/1c5fTds 密码：odwo

现存bug

  • 无法点开回复评论框里面的的表情框
    原因是：主评论框和回复评论框ID唯一，无法区分！
    若有大神有办法，恳求解决！
  • 暂时的办法：回复评论框里面可以使用文字标签解析表情图片。。。所以使用了 CSD博客：在多说中插入自定义表情这个方法。

最后的吐槽

我想把insertFace函数实现这样的功能：点击图片在评论框填写的不是html代码而是文字标签，因为不知道多说评论框好多属性还有这些还是菜鸟级别==求大神告知解决方法。

最后修改：2019 年 03 月 23 日
© 允许规范转载
喜欢我的文章吗？
别忘了点赞或赞赏，让我知道创作的路上有你陪伴。