LayUI ---layedit编辑器 在进行from表单中的使用 --无法获取值和从后台获取值进行赋值

首先抛出官方文档的地址：富文本编辑器
简单示例：

<!--前提是已经将所需要的js以及css文件进行引入过了-->
<textarea id="demo" style="display: none;"></textarea>
<script>
layui.use('layedit', function(){
  var layedit = layui.layedit;
  layedit.build('demo'); //建立编辑器
});
</script>

引入成功之后就是这个样子：

1.首先说一下在form表单提交时无法获取内容的解决方法。

    当我们在form表单中添加了这个插件的时候在进行提交操作的时候我们可以通过“layer.msg(JSON.stringify(data.field));”进行显示表单值，可以发现是获取不到富文本编辑器里的内容的。
    因为layui的富文本编辑器是在textarea上建立了一个富文本编辑器，也就是说你填写在富文本编辑器里的内容其实都只是放在编辑器里的，并没有将内容放在textarea里，当你进行获取表单中的textarea的值的时候是没有值的，所以需要先把富文本编辑器的值同步到之前的textarea中，然后才能通过textarea获取对应的值。代码如下：

 <!--html代码  简单演示 只突出主要框架以及标示名称-->
 <form class="layui-form" action="" lay-filter="component-form-element">
	
	<!--富文本编辑器-->
	<textarea id="demo" style="display: none;" name="productDescription" lay-verify="article_desc"></textarea>
	
	<!--提交按钮-->
	<div class="layui-card-body">
         <button class="layui-btn" lay-submit lay-filter="component-form-element">立即提交</button>
         <button type="reset" class="layui-btn layui-btn-primary">重置</button>
     </div>
 </form>
	

//js   代码  简单演示 只体现主要框架
<script>
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        eleTree: 'lib/eleTree'
    }).use(['layedit', 'form'],function () {
        var form = layui.form;
        var layedit=layui.layedit;
        layedit.set({
             uploadImage: {
                  url: '' //接口url
                  ,type: '' //默认post
              }
         });
         var index= layedit.build('demo'); //建立编辑器
        //获取富文本编辑器的核心代码就是  1.重新渲染一下表单   2.进行验证 同步一下 
		//进行重新渲染表单
		form.render(null, 'component-form-element');  //component-form-element 是form表单和提交按钮中 lay-filter中的值
        //自定义验证规则
        form.verify({
             article_desc: function(value){
                layedit.sync(index);
         	 }
         });
         form.on('submit(component-form-element)', function(data){
               layer.msg(JSON.stringify(data.field));
          });
</script>

以上就解决了无法在form表单中获取富文本编辑器内容的问题。

2.在从后台获取值将值赋给富文本编辑器中显示

//js   代码  简单演示 只体现主要框架  html代码省略
<script>
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        eleTree: 'lib/eleTree'
    }).use(['layedit'],function () {
        var layedit=layui.layedit;
        layedit.set({
             uploadImage: {
                  url: '' //接口url
                  ,type: '' //默认post
              }
         });
         var index= layedit.build('demo'); //建立编辑器
         //核心代码就是这一条   进行赋值	请求语句我就省略
         layedit.setContent(index,"从后台获取的值");
		
</script>