simditor编辑器添加表情
第一次登录送5个金币,绑定QQ送5个金币。金币可以用来观看视频和下载资源哦!
事情是这样的,用simditor做了一个简易的编译器,用户说需要添加表情,我上网查资料发现这个编译器没有表情,考虑用layui的编译器,可是项目引入layu后整个页面布局效果全部被layui影响了,另外我需要替换的编译器的地方有点多,想想还是在simditor编译器里加表情了。先来看看最终效果图吧
后面的这个表亲是我自己添加进去的,其实非常简单,一起来看看代码吧,可以直接复制使用哦。
首先说一下编译器图标样式出问题怎么解决?
我在引入之后,图标向上面这样,看起来很丑,产生原因是我自己的css影响了simditor编译器的样式,有兴趣可以按f12查看浏览器的控制台,找到被影响的节点。在这里我用jq来调增他的line-height就可以了
$('.toolbar-item span').css({"line-height":"30px"});
这个toolbar-item span被我的css影响,那我重新设置一下他的行高就ok了。效果如下,注意代码要写到实力化变异框的下面才起作用(页面还没有产生编译框,那肯定是没有这些节点的,所以需要写在他的后面)
然后来说说怎么加表情。
function showfaces(){ //首先你需要有表情图片,循环读取 var bq=''; for(var i=0;i<=71;i++){ bq+='<img src="${ctxf}/images/face/'+i+'.gif" onclick="faces(this)">'; } //找到编译器菜单,在他的最后面加一个表情的按钮,这个吧上面的表情添加进去 $('.simditor-toolbar ul').eq(0).append('<li><a tabindex="-1" unselectable="on" class="toolbar-item toolbar-item-outdent" href="javascript:;" title="表情" onclick="face(this)"><img src="${ctxf}/images/face/0.gif"></a><div class="toolbar-menu jf3q_faces" style="width:300px;">'+bq+'</div></li>'); //由于我的编译器菜单样式变了,我在这里设置一下 $('.toolbar-item span').css({"line-height":"30px"}); } //点击菜单的表情按钮,表情div就显示或者隐藏 function face(v){ if($(v).next().is(":hidden")){ $(v).next().show(); }else{ $(v).next().hide(); } } //点击表情,就把这个表情图片显示到编辑框里面去 function faces(v){ var src=$(v).attr('src'); $('.simditor-body').append('<img src="'+src+'">'); } //鼠标移出表情div,表情div自动隐藏 $('body').on('mouseleave','.jf3q_faces',function(){ $('.jf3q_faces').hide(); })
注意: 代码要写到实力化变异框的下面才起作用
分享会更快解决你的问题哦!