Collect from 企业网站模板

simditor编辑器添加表情

第一次登录送5个金币,绑定QQ送5个金币。金币可以用来观看视频和下载资源哦!

事情是这样的,用simditor做了一个简易的编译器,用户说需要添加表情,我上网查资料发现这个编译器没有表情,考虑用layui的编译器,可是项目引入layu后整个页面布局效果全部被layui影响了,另外我需要替换的编译器的地方有点多,想想还是在simditor编译器里加表情了。先来看看最终效果图吧

image.png

后面的这个表亲是我自己添加进去的,其实非常简单,一起来看看代码吧,可以直接复制使用哦。

首先说一下编译器图标样式出问题怎么解决?

image.png

我在引入之后,图标向上面这样,看起来很丑,产生原因是我自己的css影响了simditor编译器的样式,有兴趣可以按f12查看浏览器的控制台,找到被影响的节点。在这里我用jq来调增他的line-height就可以了

$('.toolbar-item span').css({"line-height":"30px"});

这个toolbar-item span被我的css影响,那我重新设置一下他的行高就ok了。效果如下,注意代码要写到实力化变异框的下面才起作用(页面还没有产生编译框,那肯定是没有这些节点的,所以需要写在他的后面)

image.png

image.png

然后来说说怎么加表情。

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();
	 })

注意: 代码要写到实力化变异框的下面才起作用

image.png

在此处输入评论

允许提问者通过qq联系我

    现在绑定QQ

点击加载更多...