Layui中layedit富文本遇到的坑小结

Layui中layedit富文本遇到的坑小结

最近在开发一个微信小程序课程发布的后台页面，使用富文本编辑器因为是使用layui 我就直接考虑layui 提供的富文本编辑器，在开发的过程中就遇到了很多坑，我建议能不使用layedit 就不使用layedit。

1.官方没有提供对应设置文本内容的方法：

可以不用设置 name 因为name设置了layui的form 也无法填充值进行回显

<div class="layui-form-item">
    <label class="layui-form-label">课程介绍</label>
    <div class="layui-input-block">
        <!--name="courseInfo"-->
        <textarea id="demo"  name="courseInfo" ></textarea>
    </div>
</div>
//绑定
var layeditIndex=layedit.build('demo',{
height: 360 //设置编辑器高度
});
//设置值 data.courseInfo 是要填充的值
layedit.setContent(layeditIndex,data.courseInfo);
//获取值
var content = layedit.getContent(layeditIndex)

使用form表单提交数据建议绑定一个id 手动填充值 因为form serialize 是取不到当前的值的

form.on("submit(doSubmit)",function(data){
				var content = layedit.getContent(layeditIndex)
				console.log("content=>",content)
				//重新赋值 文本监听不到值的问题
				$("#demo").val(content)
				var params= $("#dataFrm").serialize();
				$.post(url,params, function(res){
					layer.msg(res.msg);
					if(res.code===0){
						tableIns.reload();
					}
					layer.close(mainIndex);
				})
				return false;
			})

修改数据回显数据也是要手动填充值,form不能自动填充

/**
 * 修改数据
 * @param data
 */
function openCourseUpdate(data){
   mainIndex=layer.open({
      type:1,
      title:'修改课堂&课程',
      content:$("#addOrUpdateDiv"),
      area:['900px','700px'],
      success:function(index){
          url=contextPath+"api/course/save.do";
         //装载数据表格
         form.val("dataFrm",data);
         layedit.setContent(layeditIndex,data.courseInfo);
         //重新加载一次组件
         layeditIndex=  layedit.build('demo')
      }
   });
}

2.修改页面使用layui 的弹出层会和 layedit 出现冲突 ，导致提供的功能按钮失效，控制台报Uncaught TypeError: Cannot read property ‘getRangeAt‘ of null 问题

这个问题搞了我好久，最后我的解决方法是在打开这个弹出层的success 中重新渲染一遍 layedit.build(‘demo’) 这样就可以解决问题

/**
			 * 打开弹出层
			 */
			function openAddCourse(){
				mainIndex=layer.open({
					type:1,
					title:'添加课堂&课程',
					content:$("#addOrUpdateDiv"),
					area:['900px','700px'],
					success:function(index){
						 url=contextPath+"api/course/save.do";
						//重置表单
						$("#dataFrm")[0].reset();
						layedit.setContent(layeditIndex,'');
						//重新加载一次组件
						layeditIndex=layedit.build('demo')
					}
				});
			}

以上是我这次开发中发现的问题