layui 整合UEditor 百度编辑器

wkj0012023-08-07 15:49

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

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

第二步：引入百度编辑器

代码如下：

html 复制代码

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

第三步：提交表单部分

javascript 复制代码

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 内容将会为空，导致后端接收不到数据！！！