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