+
80
-

layedit编辑修改后的内容如何自动同步textarea?

layedit编辑修改后的内容如何自动同步textarea?

网友回复

+
0
-

三种办法

一、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

<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([ 'layedit'], function () {

    var $ = layui.$;
    var layedit = layui.layedit;

    var index = layedit.build('content'); //建立编辑器

    // 监听数据信息的改变
    // 利用鼠标移出事件
    $(document).on('mouseout',function(e) {
      layedit.sync(index);
    })
}
</script>

三、定时更新,写一个定时器定时更新

<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([ 'layedit'], function () {

    var $ = layui.$;
    var layedit = layui.layedit;

    var index = layedit.build('content'); //建立编辑器

    // 监听数据信息的改变
    // 利用鼠标移出事件
   setInterval(function() {
       layedit.sync(index);
   }, 1000);


}
</script>

我知道答案,我要回答