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

文章编写来源:最近在做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富文本编辑器。

相关推荐
天下皆白_唯我独黑16 分钟前
php -S 启动项目访问路由报错处理
开发语言·php
梅羽落2 小时前
python武器化开发_01
开发语言·python·php
兮动人2 小时前
Fatal error: Uncaught think\exception\ErrorException: SourceGuardian Loade
android·php
catchadmin3 小时前
2026 年 PHP 开发者进阶 快速高效开发学习习惯
学习·php
Web极客码4 小时前
深入解析WordPress的functions.php文件及其高效使用方法
开发语言·php
catchadmin4 小时前
CatchAdmin 2025 年终总结 模块化架构的进化之路
架构·php·开源软件
微爱帮监所写信寄信5 小时前
微爱帮监狱寄信写信小程序PHP底层优化框架
java·开发语言·数据库·spring·微信·php·mybatis
小虎哥-技术博客13 小时前
ThinkPHP 5.x 到 8.x 行为扩展迁移指南
php
小虎哥-技术博客18 小时前
ThinkPHP 5 到 ThinkPHP 8 路由迁移完整指南
php