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);});elselayer.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'=>'文章添加成功'];elsereturn ['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的教程就结束了。
这里的代码只贴出了部分重要的片段，控制器代码和页面其他元素代码没有贴出 但是不影响整体的阅读和操作，如有需要完整代码和JS文件等资源的可以留言评论。
TP5.1框架中百度富文本编辑器UEditor的使用相关推荐
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- 百度富文本编辑器ueditor在https协议下无法正常插入动态地图
在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...
- 百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
- Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
- themyleaf 图片上传_springboot thymeleaf 整合 百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
- html页面引入富文本编辑器,Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
- Vue 百度富文本编辑器Ueditor Spring Boot 前后台整合示例（附带完整源码）
前端 安装vue-ueditor-wrap npm i vue-ueditor-wrap 引入并注册VueUeditorWrap组件,配置组件属性 <script> import VueU ...
- 百度富文本编辑器ueditor插入html代码
记录工作中遇到的问题 需求: 文本编辑器左侧展示模板,点击左侧模板将模板展示到富文本编辑器内. 代码: // 点击模板时添加到编辑器内 $(".templates-con ul li&qu ...
- 百度富文本编辑器UEditor 图片宽度100%自适应，手机端
有些时候富文本编辑器的图片在手机端显示超出,没有自动100% 修改ueditor.all.js的23774行(左右,不一定)和24533(左右,不一定),不行就搜索 增加内容 loader.setAt ...
最新文章
- 防止熊猫烧香的微软补丁
- Appium官网Introduction
- 中国无人车公司AutoX，打响加州RoboTaxi服务第一枪
- Win10 基于excel 文件的python下载脚本
- python列表的增删改查
- vim中直接打开ipython的方法
- QT技术应用_2D绘图(转)
- MAC解决连接服务器，一段时间不操作导致断开连接，卡顿一段时间的问题。
- c++ list排序_排序（二）交换排序
- 【微型计算机原理与接口技术】计算机系统的基本组成
- MSRCRGIMP(基于GIMP版本的多尺度Retinex)
- dataframe基本函数
- 测井数据的聚类算法分段分层及图例
- ubuntu安装openpose
- win10 MAC地址绑定及解绑
- SoundPool循环播放
- IDE SATA SCSI iSCSI等存储硬盘对比与分析
- 破解电信中兴ZXV10 H618C超级密码telecomadmin
- SOLIDWORKS 2023出详图和工程图新增功能
- 线段与线段交点的求解