layui 整合UEditor 百度编辑器-Toy模板网

这篇具有很好参考价值的文章主要介绍了layui 整合UEditor 百度编辑器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

layui 整合UEditor 百度编辑器

第一步：下载百度编辑器并配置好路径

百度编辑器下载地址：http://fex.baidu.com/ueditor/

第二步：引入百度编辑器

代码如下：

      <div class="layui-form-item layui-form-text">
               <label class="layui-form-label">内容</label>
               <div class="layui-input-block" style="z-index: 100;">
                <textarea placeholder="请输入内容" class="layui-textarea" id="container"  name="content"  style="height:500px; width:700px; border:none"></textarea>
               </div>
       </div>
 <!-- 配置文件 -->
      <script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.config.js"></script>
      <!-- 编辑器源码文件 -->
      <script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.all.js"></script>
      <script type="text/javascript" charset="utf-8" src="/static/ueditor/lang/zh-cn/zh-cn.js"></script>
       <script>
              //id=container是编辑器的选择器
              var ue = UE.getEditor('container', {
                  // ... 更多配置
                  initialFrameHeight:400,
                   autoHeight: false,
                   autoHeightEnabled:false,
                   autoFloatEnabled:false
                   });
        </script>

第三步：提交表单部分

layui.use(['form','layer', 'element','upload'],function () {
        var $ = layui.$
            ,form = layui.form
            ,element = layui.element
            ,upload = layui.upload
            ,layer = layui.layer;
        form.render();
        //提交
        form.on('submit(add)', function(data){
            //更换编辑器内容
            data.field.content = ue.getContent();
            $.ajax({
                type:"post",
                url:"{:url('addpost')}",
                data:data.field,
                dataType:"json",
                // beforeSend:function () {
                //   loadIndex = layer.load();
                // },
                success:function (data) {
                    if (data.code == 0) {
                        // layer.close(loadIndex);
                        layer.alert(data.msg, {
                            icon: 2
                        }, function (index) {
                            layer.close(index);
                            $("input[name="+data.data+"]").val('').focus();
                        });
                    } else if (data.code == 1) {
                        //layer.close(loadIndex);
                        layer.alert(data.msg, {
                            icon: 1
                        }, function (index) {
                            layer.close(index);
                            var index2 = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index2); //再执行关闭
                            window.parent.location.href=data.url
                        });
                    }
                },
                error:function (xhr) {

                }


            })

        });
  });

注意：提交表单前一定要替换content的内容为编辑器内容，data.field.content = ue.getContent();
否则，提交的表单 content 内容将会为空，导致后端接收不到数据！！！文章来源地址https://www.toymoban.com/news/detail-643523.html

到了这里，关于layui 整合UEditor 百度编辑器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！