标题:layui富文本取得textarea值 layedit.sync()
 来源:Admin  位置:博客->技术支持  时间:2020-05-12  热度:484℃

正常情况,初始化layui富文本编辑器后,输入内容后点击提交按钮应该会自动同步textarea里面,至少我刚开始实验的时候是这样的,

后来添加了一个判断是否为空的条件后,发现无论输入一个字符还是两个字符都会提示空的。

到后面发现之前成功的原因是输入了大量的内容之后会触发莫名同步。,也难怪,测试的时候随手复制一大堆内容。

百度了一大堆后,有说在textarea添加的layui的验证 

在<textarea>标签中加入lay-verify="article_desc" 然后在自定义一个验证

form.verify({
    news_name: function(value){
        if(value.length < 5){
            return '标题至少得5个字符啊';
        }
    }
    ,article_desc: function(value){
        layedit.sync(index);
    }
});

太麻烦了,搞什么验证吗,就是一个AJAX提交,不死心,

回头研究了下官方文档结合百度大发 研究出如下方法:

++++++++HTML部分示例+++++++++

<div class="layui-form-item layui-form-text" >

       <div class="layui-input-block" style="margin-left:0px">
          <textarea name="content" id="content"  class="layui-textarea" placeholder=""></textarea>
       </div>
</div>

  <button type="button" class="layui-btn layui-btn-normal layui-btn-fluid" id ="send">发送内容</button>

++++++++JavaScript部分示例+++++++++

    //
    layui.use([ 'layedit',], function () {
        var layedit = layui.layedit;
        
        var index = layedit.build('content' ,{tool: ['strong','italic' ,'underline' ,'left', 'center', 'right', '|', 'face','link','unlink']});  //建立编辑器
        
        
        $("#send").click( function() { //监听#send的点击事件
        
        layedit.sync(index); //同步富文本到textarea
        
        var content = $('#content').val(); //JQ的方法获取,到这已经结束了
        if (content.length === 0) {
            layer.msg('请输入沟通内容');
            return false;
        });

就是由一个点击事件来驱动同步行为。也可以直接使用layedit.getText(index)取,不过我的目的达到了,不想折腾,就是一个思路。[鼓掌][鼓掌]

 

 

 

  • 上一篇:纯CSS解决Y轴滚动条出现时抖动问题
  • 下一篇:
  • API_文档
    友情联系
    前端基于layui制作
    君竹发卡