请注意,本文编写于 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太长,我也准备改改==
改成通过正则替换的么?
恩,就是你们的那样
期待中-ing
完成不了了[#泪]
为什么
点击图片的onclick事件后面的函数insertFace(faceid)实现这样的功能:点击图片,在评论框中填入表情标签文字(如:/#/[滑稽]) 这个我不会,这个好像不需要正则#
2333
博主来发友链吗
好啊,加好啦
我也加好了
我不敢放滑稽进去,怕整个网站变成笑话站#[滑稽]
文艺范就没了
真聪明,赏你一枚滑稽币#[滑稽]
假币
手机楼中楼好像点不开表情#[滑稽]
我的还是一日的?
应该是说我的吧,我的点的开呀
可能是我这有问题吧
哈哈
我那个的原理就是点击一个表情出现指定文字,如#[滑稽],而上篇文章自定义表情的主要实现方式就是将指定文字转换为img标签。
懂了,首先还是把回复评论框问题解决了
滑稽好评
大家都改了啊
谢谢博主,借鉴啦!
不明觉厉不明觉厉!!!!!
扒了别人的