使用layui的富文本编辑器,其实是在某个textarea的基础上建立了一个富文本编辑器,往textarea所填写的内容其实是放在富文本编辑器里面的,并没有放在textarea中,当获取textarea的值的时候需要先把富文本编辑器的值同步到之前的textarea中,然后才能通过textarea获取对应的值。
(一)问题:
(二)提交结果发现remark中并没有填入的数据
(三)解决方法
-
官网提供的编辑器的基础方法的介绍(跳转连接)
方法名 描述 var index = layedit.build(id, options) 用于建立编辑器的核心方法
index:即该方法返回的索引
参数 id: 实例元素(一般为textarea)的id值
参数 options:编辑器的可配置项,下文会做进一步介绍layedit.set(options) 设置编辑器的全局属性
即上述build方法的optionslayedit.set(options) 获得编辑器的内容
参数 index: 即执行layedit.build返回的值layedit.getText(index) 获得编辑器的纯文本内容
参数 index: 同上layedit.sync(index) 用于同步编辑器内容到textarea(一般用于异步提交)
参数 index: 同上layedit.getSelection(index) 获取编辑器选中的文本
参数 index: 同上
- 首先我们在textarea标签中加入lay-verify=“content”;这一句是给textarea增加了一个名为“content”的自定义验证规则。
- js中自定义富文本编辑器,定义验证规则并使用layedit.sync(index)方法将输入的信息同步到textarea中
- textarea中使用自定义验证
<div class="layui-form-item layui-form-text"> <label class="layui-form-label">备注:</label> <div class="layui-input-block textarea_width"> <textarea name="remark" id="remark" placeholder="请输入内容" lay-verify="content" class="layui-textarea"></textarea> </div> </div>
- 自定义验证,将富文本编辑器的值同步到之前的textarea中
//创建一个编辑器 var editIndex = layedit.build('remark', { height: 150 //设置编辑器高度 }); //自定义验证规则 form.verify({ content: function(value) { // 将富文本编辑器的值同步到之前的textarea中 layedit.sync(editIndex); } }); //监听提交 form.on('submit(from)', function(data) { console.log(data); layer.alert(JSON.stringify(data.field), { title: '最终的提交信息' }) return false; });