完全更改多说表情框

吐槽

更改原因有几点:

  • 多说官方表情实在太丑,实在太丑,根本已经跟不上新时代的潮流了,完全不懂多说官方为什么要把那么多不好看表情堆在一起==。

  • 表情框不能自适应!在手机上,整个页面根本没法看!瞎==

  • 表情框错位,表情框左边总是长了一截,应该是和主题的部分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代码而是文字标签,因为不知道多说评论框好多属性还有这些还是菜鸟级别==求大神告知解决方法。

最后修改:2017 年 02 月 03 日 08 : 12 PM
如果觉得我的文章对你有用,请随意赞赏

53 条评论

  1. 从零开始学运营

    学习了

  2. Linger

    厉害

    1. 一日
      @Linger

      过奖

  3. benen005

    确实厉害

    1. 一日
      @benen005

      嘿嘿

  4. 姜辰

    厉害的博主~~

  5. lexus

    吃瓜群众看看不说话。

    1. 一日
      @lexus[滑稽]
  6. 胡博靖
    1. 一日
  7. 千千

    还是这样做起来简单,直接加图片标签,可以解决好多问题的唉

    1. Accompany
      @千千

      对哒,不过图片html太长,我也准备改改==

      1. 千千
        @Accompany

        改成通过正则替换的么?

        1. Accompany
          @千千

          恩,就是你们的那样

          1. 千千
            @Accompany

            期待中-ing

            1. 一日
              @千千

              完成不了了[#泪]

              1. 千千
                @一日

                为什么

                1. 一日
                  @千千

                  点击图片的onclick事件后面的函数insertFace(faceid)实现这样的功能:点击图片,在评论框中填入表情标签文字(如:/#/[滑稽]) 这个我不会,这个好像不需要正则#

                  1. 千千
                    @一日

                    2333

发表评论