吐槽

更改原因有几点:

  • 多说官方表情实在太丑,实在太丑,根本已经跟不上新时代的潮流了,完全不懂多说官方为什么要把那么多不好看表情堆在一起==。
  • 表情框不能自适应!在手机上,整个页面根本没法看!瞎==
  • 表情框错位,表情框左边总是长了一截,应该是和主题的部分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!

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

现存bug

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

最后的吐槽

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

最后修改:2019 年 03 月 23 日
喜欢我的文章吗?
别忘了点赞或赞赏,让我知道创作的路上有你陪伴。