layui富文本域form表单提交和ajax提交获取编辑器内容详解

最近写项目中需要用到LayUI富文本编辑器，提交时发现富文本编辑器中内容是空的，查了很多资料才发现，LayUI在渲染富文本域时，是在下面插入的样式代码。我们页面上定义的是一个textarea标签，之后用JS渲染的。我们获取的内容是textarea中内容，富文本域中的内容和textarea中的内容不是自动同步的，所以我们需要在提交前把内容同步一下。

form表单提交：

首先定义文本域和提交按钮

提交时把富文本域中的内容与textarea标签同步一下。

ajax提交

ajax提交form表单是一样的

提交部分代码，先绑定按钮，同步文本内容，在发送post请求提交：

注意：submit(formSubmit)中的formSubmit为提交按钮的lay-filter值。data.field可以获取到form表单中的数据。返回false是阻止form提交后，在进行form表单提交刷新页面。

form.on("submit(formSubmit)", function (data) {
    console.log(data.field);
    $.post("layEdit/save", data.field, function(result){
        layer.msg(result.msg,{offset:'rb'});
    });
    return false;
})

上面插入都是图片，下面为代码部分：

form表单部分代码：

<form id="myForm" action="layUITextarea/save" method="post" class="layui-form white-bg radius">
	<input type="hidden" name="id" id = "id" value="${model.id}">
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">标题</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" name="title" value="${model.title}">
			</div>
		</div>
		<div class="layui-inline"> 
			<label class="layui-form-label">类型</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" name="type" value="${model.type}">
			</div>
		</div>
	</div>
	<textarea id="lay_edit" lay-verify="content" name = "text">${model.text}</textarea>
	
	<button type="submit" class="layui-btn" lay-submit="" lay-filter="formSubmit">提交</button>
</form>

同步部分代码：

layui.use(['layedit', 'form'], function(){
	var form = layui.form;
  	var layedit = layui.layedit;
  	layedit.set({	//设置图片接口
  	  	uploadImage: {
	  	    url: 'layUITextarea/upload', //接口url
	  	    type: 'post'
  	  	}
  	});
  	//创建一个编辑器
  	var index = layedit.build('lay_edit',{
  		height: 350
  	});
  	//提交时把值同步到文本域中
  	form.verify({
  		//content富文本域中的lay-verify值
           content: function(value) {
               return layedit.sync(index);
           }
       });
    //提交
     form.on("submit(formSubmit)", function (data) {
            console.log(data.field);
            $.post("layEdit/save", data.field, function(result){
                layer.msg(result.msg,{offset:'rb'});
            });
            return false;
        })
});

最后关于layui富文本域图片上传回显问题可以访问：https://blog.csdn.net/qq_40205116/article/details/89433791

layui富文本域完整案例：https://blog.csdn.net/qq_40205116/article/details/89536834