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