layer+UEditor 问题总结 （UEditor 字体颜色下拉框不显示，获取UEditor 的值进行提交， ajax回调进行html赋值以及重新赋值）

相信很多小伙伴在初次使用layer+UEditor 会出现一些问题，

比如

1·在弹框中UEditor 的字体大小和颜色等等没办法修改，

2·因为没有name属性而需要使用别的方法进行获取值，进行提交

3·使用ajax从数据库中读取数据对UEditor 赋值以及重新赋值

下面一一把我的方法写出来

1.在弹框中UEditor 的字体大小和颜色等等没办法修改，

这个问题其实是layer的zIndex的优先级太高，而使UEditor 的下拉框无法显示

解决办法

layer.open({
    title: '修改服务信息',
    type: 1,
    skin: 'layui-layer-rim', //加上边框
    area: ['820px', '640px'], //宽高
    content: $('#tancenguplo'),
    //层优先级,
    zIndex:1000
});

给弹出层加上zIndex:1000这个值，然后修改ueditor.config.js中zIndex的值，在64行，默认是注释掉的，改为zIndex : 20000000 

 

2·因为没有name属性而需要使用别的方法进行获取值，进行提交

当需要提交表单时因为UEditor没有name属性，所以就需要使用别的方法进行获取到值，我是这样写的

var ue = UE.getEditor('editor');  //实例化编辑器
 
form.on('submit(add)', function(data){
	  	var content = null;
	    ue.ready(function() {
		    //获取html内容
		    content = ue.getContent();
		});
	  	$.ajax({
	  	
	  	})
	  	return false;
});

$.ajax中写你的参数，其中UEditor的html值可以直接使用content

3·使用ajax从数据库中读取数据对UEditor 赋值，以及重新赋值

后台处理：当我们使用ajax回调函数，需要对UEditor赋值从数据库中读取的值时，需要在php中对数据库中的值进行转义。使用htmlspecialchars_decode，代码如下，可根据自身项目实际，进行修改

$succ_data['content'] = htmlspecialchars_decode($succ_data['content']);

前台处理：数据得到后就需要进行赋值，代码如下

//先定义两个全局变量
var ue2 = null;
var content = null;
 
//弹出层：修改信息
$(".mybtn2").on('click',function(){
	var id = $(this).attr("id");
 
	$.ajax({
		url:"",
		data:{
			
		},
		success:function(e){
            //对数据进行格式转换
			var e = JSON.parse(e)
            //获取对UEditor赋值的值
			content = e.content
            //实例化编辑器
			ue2 = UE.getEditor('editor2');
			ue2.ready(function() {
                //对编辑器进行赋值
				ue2.setContent(content);
			})
 
			form.val("formuplo",{
					
			})
							
		   layer.open({
				 title: '',
				 type: 1,
				  skin: 'layui-layer-rim', //加上边框
				  area: ['820px', '640px'], //宽高
				  content: $('#tancenguplo'),
				  //层优先级,
            	  zIndex:1000
			});
		}
	})
})

之所以将content定义到全局变量，是为了每次关闭弹框再打开时都会重新赋值。

 

希望对大家有所帮助

end;