TP5.1框架中百度富文本编辑器UEditor的使用

本文链接：https://blog.youkuaiyun.com/qq_38280150/article/details/98207088

本文介绍了如何在ThinkPHP5.1框架中集成并使用百度富文本编辑器UEditor，包括下载安装、页面引入、配置设置、后台发布文章、查看文章和编辑文章的实例，展示了UEditor在实际项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实际项目开发中最常使用到的工具之一就是富文本编辑器，使用富文本编辑器可以实现所见即所得的效果，且所有富文本编辑器里的内容(包括图片，视频，音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段。当前市面上有许多可供选择的富文本编辑器，虽然百度的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;

        $(