关于layui富文本编辑器同步编辑器内容到textarea layedit.sync(index)

字号+ 作者:alpha 来源:www.seoalphas.com 2018-08-28 15:10 我要评论(0)

正常情况,初始化layui富文本编辑器后,添加的内容也可以正常接收处理,通过ajax添加到数据库中,但是在编辑修改的时候出现问题了:修改个别文字符号标

正常情况,初始化layui富文本编辑器后,添加的内容也可以正常接收处理,通过ajax添加到数据库中,但是在编辑修改的时候出现问题了:修改个别文字符号标点,提交后后台ajax回来的提示为内容未变化,也就是说刚才的修改操作提交的编辑器内容没有改变

代码如下:

<div class="layui-input-block">
<textarea id="content" name="content" autocomplete="off" lay-verify="content" placeholder="请输入内容"  class="layui-textarea fly-editor" style="height: 100px;">{$content|default=''}</textarea>
</div>
//富文本编辑器自定义工具栏
        layedit.build('content', {
            tool: ['strong','italic','face','underline','del', 'link', 'unlink', '|', 'left', 'center', 'right','b']
            ,height: 150
        })

看了官方文档,也知道是数据异步提交未同步的原因,使用layedit.sync(index) 解决,但是就不知道怎么使用。在网上搜索了好长时间,尝试无数次失败后终于让我看到了阳光:

在<textarea>标签中加入lay-verify="content" 然后在form的表单自定义验证中加入如下代码即可

form.verify({
    content: function(value) { 
         return layedit.sync(index);
        }
});

上面验证代码中有个index参数,需要在初始化富文本编辑器的时候设置下:

 //富文本编辑器自定义工具栏
        var index = layedit.build('content', {
            tool: ['strong','italic','face','underline','del', 'link', 'unlink', '|', 'left', 'center', 'right','b']
            ,height: 150
        })

QQ截图20180828152339.jpg

经过上面两步,就可以解决异步提交layui富文本编辑器数据不同步的问题了


<script>
  var layedit  , index;
  layui.use(['form' , 'layedit'], function(){
    var form = layui.form() ;
    layedit = layui.layedit;
    layedit.set({
        uploadImage: {
          url: '/topic/upload.html' //接口url
          ,type: 'post' //默认post
        }
    });
    index = layedit.build('content',{tool: ['strong', 'italic','underline','del','|','left','center','right','|','link','unlink','face','image','|','code']}); //建立编辑器
       
  });
      
    });
  </script>


标签
textarea layedit.sync

本站部分技术文章为参考网上实用内容发布,目的是记录踩坑经验,若未备注来源而侵犯了您原创文章权益,请联系博主删除;对文章有不同看法的朋友欢迎在评论区留言互动

相关文章
  • HTML JS 弹层后底部页面禁止滚动处理

    HTML JS 弹层后底部页面禁止滚动处理

    浏览次数:822

  • 手机web页面调用打开QQ聊天功能

    手机web页面调用打开QQ聊天功能

    浏览次数:807

  • form表单提交,前端验证

    form表单提交,前端验证

    浏览次数:609

  • js刷新页面方法大全

    js刷新页面方法大全

    浏览次数:520

  • JavaScript操作JSON操作文档

    JavaScript操作JSON操作文档

    浏览次数:458

  • js中不存在exit函数,程序的运行中断停止,可使用return

    js中不存在exit函数,程序的运行中断停止,可使用return

    浏览次数:334

  • JavaScript表单数据验证 onclick()

    JavaScript表单数据验证 onclick()

    浏览次数:316

  • 实现select中指定option选中触发事件

    实现select中指定option选中触发事件

    浏览次数:314

网友点评
功能开发中......
0.250000s