请注意,本文编写于 3058 天前,最后修改于 2092 天前,其中某些信息可能已经过时。
吐槽
更改原因有几点:
- 多说官方表情实在太丑,实在太丑,根本已经跟不上新时代的潮流了,完全不懂多说官方为什么要把那么多不好看表情堆在一起==。
- 表情框不能自适应!在手机上,整个页面根本没法看!瞎==
- 表情框错位,表情框左边总是长了一截,应该是和主题的部分css冲突还是咋滴。。。发现有些博客也有这个问题
说明
- 本文代码来自于魔改多说ing我仅仅做了一点点分析
- 这种方法和CSD:把多说表情框内的表情换成自己的表情有点不同,这种方法是完全自己创建一个表情框。而CSD提供的方法是在原有多说评论框基础上修改。
原理及实现方法
其实很简单,就是增加了一个表情框的div。去掉以前的多说表情的显示。新的表情框设计原理:
- 增加一个facemenu的按钮,并用“hideface()”实现点开图标打开表情框事件:
- 增加一个facediv表情框,并定义好初始css
- 在表情框内用
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代码而是文字标签,因为不知道多说评论框好多属性还有这些还是菜鸟级别==求大神告知解决方法。
52 条评论
谁能告诉我怎么改才能点击图片出现的不是html代码而是#[滑稽] 这种的
对啊,我也发现了,晚上回去看看咋改
你可以看看我的啊,刚发现你的回复表情框还是在上面
快出个教程
我吃饭了,教程csd不是有吗
晚上再去研究下
你可以直接把我的js下载了然后把所有泡泡链接地址改了,然后在我的comments.css里面带着颜表情一起把css扒了就行了
很赞
我也是按别人教程弄得
好
我写了教程要不要去看看啊你弄完喊我下,我看看你的
回复框是个bug咋改