PHP开发环境下接入ueditor富文本编辑器

旺仔Sec2025-12-10 9:44

文章编写来源：最近在做PHP开发的时候需要接入一下文本编辑器，原本想着用Markdown编辑器的，但是这个主要面向于程序员之类的群众，那么为了适配大众实用，于是就有了这篇接入ueditor富文本编辑器的文章。

一、首先从官网下载一个UEditor文本编辑器

下载链接：https://github.com/fex-team/ueditor

下载完成后如下图所示

二、在项目中接入UEditor文本编辑器

为了后续文件名方便，我们可以把文件夹名改为ueditor并移送至我们的开发项目目录下。

在需要引入ueditor文本编辑器的文件中引入两个js文件，一个是ueditor.config.js，另一个是ueditor.all.js

（❌️注意：路径和顺序一定不要错，先引入ueditor.config.js文件，再引入ueditor.all.js文件，不然会出现一些不必要的麻烦和错误）

javascript 复制代码

<script src="./ueditor/ueditorconfig.js">/*引入配置文件*/</script>
<script src="./ueditor/ueditor.all.js">/*引入源码文件*/</script>

创建一个文本编辑区，一定要注意id属性，应为在实例化UE对象的时候要用到（这个文本编辑区就是放UE编辑器的地方，需要哪个页面显示，然后在设置它的位置，大小属性）然后进行实例化UE对象

javascript 复制代码

<textarea id="content" rows="10" cols="70" style="border:1px solid #E5E5E5;"></textarea>
  <script type="text/javascript">
  UE.getEditor("content");//实例化编辑器  传参,id为将要被替换的容器。
</script>

getEditor（）函数重的参数，就是刚刚创建文本编辑器时的id属性，实例化之后保存，然后在浏览器中查看效果

这样就成功引入ueditor富文本编辑器。