layui 整合UEditor 百度編輯器

第一步：下載百度編輯器并配置好路徑

百度編輯器下載地址：http://fex.baidu.com/ueditor/

第二步：引入百度編輯器

代碼如下：

      <div class="layui-form-item layui-form-text">
               <label class="layui-form-label">內(nèi)容</label>
               <div class="layui-input-block" style="z-index: 100;">
                <textarea placeholder="請(qǐng)輸入內(nèi)容" 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){
            //更換編輯器內(nèi)容
            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); //先得到當(dāng)前iframe層的索引
                            parent.layer.close(index2); //再執(zhí)行關(guān)閉
                            window.parent.location.href=data.url
                        });
                    }
                },
                error:function (xhr) {

                }


            })

        });
  });       

注意： 提交表單前一定要替換content的內(nèi)容為編輯器內(nèi)容，data.field.content = ue.getContent();
否則，提交的表單 content 內(nèi)容將會(huì)為空，導(dǎo)致后端接收不到數(shù)據(jù)?。?！文章來源地址http://www.zghlxwxcb.cn/news/detail-643523.html

到了這里，關(guān)于layui 整合UEditor 百度編輯器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！