layui富文本编辑器同步的问题

1、创建一个layui富文本编辑器

<form>
    <textarea id="content" name="content" style="display: none;"></textarea>
</form>
<script>
layui.use('layedit', function(){
  var layedit = layui.layedit;
  layedit.build('content'); //建立编辑器
});
</script>

实际上我们写到页面上的是一个隐藏的textarea控件（文本域，我们给这个文本域添加name属性，便于表单提交），layui在这个textarea下面为我们创建了富文本。所以，我们在富文本中填写的内容并没有直接填写到textarea中，

表单提交（异步）时，我们需要将富文本内容同步到textarea；
数据回显时，我们需要将textarea的内容同步到富文本；

2、新增页面，保存提交时将富文本内容同步到textarea，保证form提交正常获取数据
以下是layui官网提供的方法：

LayEdit提供了相当精简的方法，如下：

方法名 描述
var index = layedit.build(id, options) 用于建立编辑器的核心方法
index：即该方法返回的索引
参数 id： 实例元素（一般为textarea）的id值
参数 options：编辑器的可配置项，下文会做进一步介绍
layedit.sync(index) 用于同步编辑器内容到textarea（一般用于异步提交）
参数 index： 同上
更多方法参考官方文档：https://www.layui.com/doc/modules/layedit.html#base

其中的layedit.sync(index)方法用于同步，但是直接摆到js文件对于form表单提交获取值没什么用

可用的使用方式：利用表单提交时需要表单验证的特性，我们自定义对textarea的验证，在验证时进行同步操作，然后获取表单内容时，就能够取到富文本的值了

代码片段

<form class="layui-form"> 
  <div class="layui-form-item">
    // 自定义lay-verify=""属性
    <textarea id="content" name="content" lay-verify="content" style="display: none;"></textarea>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script>
 layui.use(['form', 'layedit'], function () {
    var form = layui.form;
    var $ = layui.$;
    var layedit = layui.layedit;
 
    var index = layedit.build('content'); //建立编辑器
 
    //获取表单前进行验证，此时已经同步了
    form.verify({
        content: function (value) {   
            layedit.sync(index);
        }
    });
 
    form.on('submit(*)', function(data){
      console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
      console.log(data.field.content) //此时content就可以获取到我们写在富文本中的值
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
}
</script>
要点：在textarea控件中添加lay-verify属性用来表单验证，在表单验证中进行同步

3、修改页面，富文本内容如何正常回显
其实我们可用直接给富文本赋值，但是并不推荐这样做，而且这个富文本本身就不是我们写出来的，是layui创造出来的，所以还是不要想着去获取富文本控件，正常的方式是将textarea内容同步到富文本中。

大多数情况下我们是整个表单进行回显，此时就可以用layui的表单赋值方法（form.val('filter', object)，官方文档：https://www.layui.com/doc/modules/form.html#val）

但是此时富文本可能无法回显，关于富文本回显要注意的是：先表单赋值，再创建富文本。即在执行form.val('filter', object)之后创建富文本。

代码片段

<script>
layui.use(['form', 'layedit'], function () {
    var form = layui.form;
    var $ = layui.$;
    var layedit = layui.layedit;
 
    //先 给表单赋值
    form.val("formTest", data); //data就是表单的json数据，其中也包括content（富文本的name）属性
    
    //再 创建富文本编辑器
    var index = layedit.build('content'); //建立编辑器
     
    //==============以下提交表单时使用====================
 
    //获取表单前进行验证，此时已经同步了
    form.verify({
        content: function (value) {   
            layedit.sync(index);
        }
    });
 
    form.on('submit(*)', function(data){
      console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
      console.log(data.field.content) //此时content就可以获取到我们写在富文本中的值
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
}
</script>
 ~~~
————————————————

原文链接：https://blog.csdn.net/shuair/article/details/105954897