TP5.1框架中百度富文本编辑器UEditor的使用
在实际项目开发中最常使用到的工具之一就是富文本编辑器，使用富文本编辑器可以实现所见即所得的效果，且所有富文本编辑器里的内容(包括图片，视频，音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段。当前市面上有许多可供选择的富文本编辑器，虽然百度的UEditor已在2016年即停止更新且界面风格较老，但是其属性，功能十分强大，所以仍是当前富文本编辑器里最好的选择之一。
现在就开始在ThinkPHP5.1框架中使用百度富文本编辑器UEditor
首先我们需要进入UEditor的官网下载所需资源(点我进入UEditor官网)
这里我选择的是1.4.3.3的PHP版本，编码格式为UTF-8。
下载得到的是一个压缩包，里面只有一个名为utf8-php的文件夹，我们将此解压出来并重命名为ueditor并放入TP5.1框架中的public目录下的static目录中，目录结构如图：
至此UEditor已经整合到项目中了，接下来打开我们需要使用UEditor的页面引入UEditor所需的JS文件
<script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/static/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/static/ueditor/lang/zh-cn/zh-cn.js"></script>
如果ueditor文件夹目录结构和我一样的话这样引入即可，否则换成你自己的目录也没问题。
然后我们需要添加一个文本域，并为它的id和name属性赋值：
<div class="layui-form-item">
<label class="layui-form-label"><span class="x-red">*span>内容label>
<div class="layui-input-inline">
<textarea id="content" name="content" rows="10">textarea>
div>
div>
接下来只需在JS中将文本域渲染成UEditor即可，JS代码如下：
<script type="text/javascript">
var ue = UE.getEditor('content', {
initialFrameWidth: 900, //初始化宽度
initialFrameHeight: 300, //初始化高度
maximumWords:1000, //最大长度限制
autoHeightEnabled: false, //禁止自动长高
autoFloatEnabled:false, //禁止工具条漂浮
zIndex:"0"
});
</script>
getEditor方法中第一个属性为文本域的id值，第二个属性为独立设置，如果想要修改全局设置需要打开相应目录下的ueditor.config.js文件，在这里可以查看并修改UEditor的全局默认属性。
接下来打开页面测试一下就可以看到文本域已经被渲染成了UEditor，我们可以在里面随意写入格式文本包括文件的上传，这里为了测试随意写入了一些内容：
既然富文本编辑器里的内容会以html格式存放在数据表中，那么上传的图片等文件必定有一个src目录，那么这个目录在哪呢？
我们可以打开ueditor中php文件夹的config.json可以看到上传各个文件的设置，这里以图片为例可以看到图片的上传目录等各项设置：
之后我们打开此目录可以查看到刚刚添加到UEditor中的图片被复制了一份并以配置项中的规则重命名了，在之后存放到数据库中此img标签的src值即是此路径：
至此在页面中引用百度富文本编辑器UEditor并配置操作已完成，如果想在TP5.1中得到实际应用请往下看
在项目中使用UEditor往往是应用于需要保存带有多种元素的内容，比如网页中留言，发布文章，活动详情等需要丰富元素的功能都会有需要，之前也说了只要使用了富文本编辑器即可达到将输入的内容原样保存，在需要的时候也可以原样输出的效果。
所以这里以实际的功能模块为例简单说明一下在TP5.1中如何更好应用UEditor。
这里功能模块将以后台发布文章、查看文章、编辑文章为例：
以下代码展示将只列出部分代码片段，页面其他元素代码略过
首先需要一个文章发布功能，那么首先就需要完善一下页面，UEditor的应用前面已经说过了，页面其他元素请大家随意添加，这里放出的是我添加好其他表单元素的发布文章表单页效果图：
这里注意的是直接使用表单序列化的话无法获取UEditor的内容，这里要使用UEditor的JS方法获取一下内容，这里贴出获取内容和ajax上传的JS代码片段：
注意最重要的两行是
var content = ue.getContent();
formData.append(“content”,content);
这里的ue是你渲染文本域时的命名
ajax回调可以使用你们自己的JS，这里展示的项目整体使用的是layui 1 的JS，如有需要也可以自己到官网下载
<script type="text/javascript">
layui.use(['form','layer','upload'], function(){
$ = layui.jquery;
var form = layui.form()
,layer = layui.layer;
$('#addbtn').on('click',function () {
var formData = new FormData();
var content = ue.getContent();
formData.append("title",$('#title').val());
formData.append("user_id",$('#user_id').val());
formData.append("pv",$('#pv').val());
formData.append("like_num",$('#like_num').val());
formData.append("status",$("input[name='status']:checked").val());
formData.append("content",content);
$.ajax(
{
type:'post',
url: "{:url('index/content/doadd')}",
data: formData,
contentType: false,
cache:false,
processData : false,
beforeSend: function () {
$("#addbtn").attr({ disabled:true });
},
success: function(returndata){
$("#addbtn").attr({ disabled:false});
if(returndata.status==1)
layer.alert(returndata.message, {icon: 6},function (thiswindow) {
parent.location.reload();
layer.close(thiswindow);
});
else
layer.alert(returndata.message, {icon: 5},function (thiswindow) {
layer.close(thiswindow);
});
},
error: function () {
$("#addbtn").attr({ disabled:false });
layer.alert('请求错误.请稍后再试', {icon: 5},function (thiswindow) {
layer.close(thiswindow);
});
}
}
)
})
})
</script>
我这里ajxa上传的位置是index模块下content控制器的doadd方法(为了方便和我一样的萌新阅读写的细了点，仅供参考)：
public function doadd()
{
if(!Request::isAjax())
return $this->error('请求非法');
$addinfo = Request::param();
if(NULL==Db::table('user')->where('id','=',$addinfo['user_id'])->find())
return ['status'=>5,'message'=>'数据库没有此用户ID'];
$validate = new Validate();
$validate->rule(['title|文章标题'=>'require|max:40|min:4','content|文章内容'=>'require|min:20',
'user_id|用户ID'=>'require','pv|阅读量'=>'require','like_num|点赞量'=>'require','status|状态'=>'require']);
$checkres = $validate->check($addinfo);
if(!$checkres)
return ['status'=>-1,'message'=>$validate->getError()];
$nowtime = time();
$addinfo['create_time'] = $nowtime;
$addinfo['update_time'] = $nowtime;
$addresult = Db::table('community')->insert($addinfo);
if($addresult)
return ['status'=>1,'message'=>'文章添加成功'];
else
return ['status'=>-2,'message'=>'数据库错误,插入失败'];
}
这里成功插入数据库后我们打开mysql可视化工具可以看到这里插入的是html格式的内容：
这里以文本完整展示一下数据库中字段的内容：
<p style="text-align: center;"><span style="font-size: 24px;">
<strong>我是Sol，在这里测试一下UEditor的集成效果strong>
span>p><p>
<strong>
<span style="font-size: 20px;">加粗 span>
strong>
<em><span style="font-size: 20px;">
倾斜 span>
em>
<span style="font-size: 20px; text-decoration: underline;">
下划线
span>
<span style="font-size: 20px; text-decoration: none;">
包括表情自带表情：<img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>
<img src="http://img.baidu.com/hi/jx2/j_0016.gif"/>
<img src="http://img.baidu.com/hi/jx2/j_0029.gif"/>
<img src="http://img.baidu.com/hi/jx2/j_0061.gif"/>
<img src="http://img.baidu.com/hi/jx2/j_0080.gif"/>
<img src="http://img.baidu.com/hi/jx2/j_0072.gif"/>
span>
<br/>p><p><span style="font-size: 20px;">再插入个图片并居中>
span>p><p style="text-align: center;"><span style="font-size: 20px;">>
<img src="/ueditor/php/upload/image/20190802/1564732682.jpg" title="1564732682.jpg" alt="Sol.jpg"/>
span>>p>
接下来做一个文章详情展示的功能来测试一下能否原样输出吧，这里只需要从数据库中取出content字段然后赋值给模板，然后由模板进行展示即可，但是这里需要注意的是，如果直接将content作为模版变量直接输出的话就真的是”原样输出“了，因为完全将数据库中的字段连带html标签输出了：
<div class="pd-20" style="margin-top: 20px;">
<table class="layui-table" lay-skin="line">
<tbody>
<tr>
<th>文章内容th>
<td>{$contentinfo.content}td>
tr>
tbody>
table>
div>
如果直接使用模版变量$contentinfo.content的话效果如下：
如果我们想获得当时在编辑器中原样输入的内容的话需要调用框架自带的raw方法即可转义输出html内容，代码以及效果如下：
<div class="pd-20" style="margin-top: 20px;">
<table class="layui-table" lay-skin="line">
<tbody>
<tr>
<th>文章内容th>
<td>{$contentinfo.content|raw}td>
tr>
tbody>
table>
div>
这就是使用富文本编辑器的所见即所得的效果体现。
既然做好了文章发布和文章详情功能，那么还需要一个文章编辑功能，既然是编辑那么就需要在打开编辑功能的时候将此文章的所有原来的信息先自动填入表单然后再修改，这里大家想到的肯定是在表单元素中将控制器传过来的原信息模板变量赋给value值，对于一般表单元素这是没问题的，但是注意文本域已经被渲染成了富文本编辑器，此时通过value属性是无法控制富文本编辑器内容的，就和发布文章时获取富文本内容时一样，这里我们同样需要UEditor的JS方法，设置富文本编辑器内容的方法名为setContent，所以我们只需在JS初始化时将其赋值即可，代码如下：
ue.setContent('{$contentinfo.content|raw}');
这里的ue是你渲染文本域时的命名
注意这里的模版变量同样需要raw方法来html转义输出才能获取原内容，完成以上步骤后进行编辑即可在编辑表单中恢复数据库中此文章的所有信息，包括之前富文本编辑器的编辑内容和进度：
至此，在TP5.1框架中简单应用UEditor的教程就结束了。