选项卡 layui富文本编辑器form提交表单 弹出窗口/选项卡

首先是三个选项卡 用的是layui.layer.open()打开的弹窗

其次选项卡里有textarea
textarea又是用form表单提交的 富文本编辑器的内容

这里我我们需要注意如下几点内容
1.富文本编辑器的内容 不能写在上面的已经定义过的layui.use的里面，要在layer.open()后面单独写一个layui.use

2.如果三个选项卡都需要用到富文本编辑器 需要在三个选项卡的富文本编辑器上的id上每个都单独定义一个 加载富文本编辑器的代码 这样子三个富文本编辑器的样式就都有了

3.传值的时候 不能直接在下面直接转义 要在外面转义 如图，我是在校验表单的时候转义的

这里放代码

//加载富文本编辑器 layui.use(['layedit', 'form'],function() { var layedit = layui.layedit; //创建一个文本编辑器 layeditIndex = layedit.build('context', { //选择需要的元素 tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right'], height:155 }); layeditIndex2 = layedit.build('context2', { //选择需要的元素 tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right'], height:155 }); layeditIndex3 = layedit.build('context3', { //选择需要的元素 tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right'], height:155 }); });

//富文本编辑器 取值元素 var layeditIndex var layeditIndex2 var layeditIndex3

/** * 检查表单参数是否合法 * @returns {} 可以提交的表单参数 */ function checkBeforeSubmit() { layui.layedit.sync(layeditIndex) //公告 layui.layedit.sync(layeditIndex2) //广告 layui.layedit.sync(layeditIndex3) //新闻 const formData = $(commitForm).serializeObject() console.log("你要提交的表单是",commitForm) // 普通字段 if (!formData.title ) { Layer.error('内容未填写完整') return } return formData }

<!--广告内容--> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">广告内容</label> <div class="layui-input-inline" style="width: 97%;height: 200px"> <textarea name="context" id="context2" placeholder="在这里输入您的公告" class="layui-textarea" style="height: 100%" lay-verify="wenbenyu"></textarea> </div> </div>