2024年5月5日发(作者:)

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、

可定制、用户体验优秀等特点。开源基于BSD协议,所有源代码在协议允许范围内可自由

修改和使用。最近在开发程序的时候需要集成一个富文本编辑器,UEditor的UI及UE比

CKEditor、KindEditor要好出不少。所以简单地对UEditor研究了一下,记录于此。

一、下载UEditor编辑器

UEditor官方网站:/

在下载频道可以下载到最新版本的UEditor

UEditor的下载方式分为两种,完整下载与定制下载,完整下载提供UTF-8与GBK

两种编码的版本,定制下载目前只有UTF-8编码,推荐使用定制下载,按需求定制,如果

程序不是UTF-8编码,可以使用EditPlus等工具将压缩包里所有的HTML及JS文件转码,

记得同时修改HTML文件中的charset=utf-8。

二、精简UEditor编辑器

完整版的相关文档与示例页面较多,可以自行研究一下,下面为定制版中可以精简的

文件。

是所定制的UEditor编辑器的示例文件,删除之。

与内容相同,是的压缩版,使用时加载

即可,所以也可以删除。

三、将UEditor部署到PHP程序上

1.将UEditor的所有文件放在PHP程序的目录中,这里我把文件放在/ueditor目录下。

2.在网页中引入UEditor文件

3.在textarea标签下初始化UEditor

四、配置UEditor编辑器

editor_是UEditor的配置文件,首先对路径进行配置。

修改第27行左右的路径配置(根据版本不同可能会有变动)

URL = "ueditor/"; //根据实际情况配置

保存,OK搞定,UEditor编辑器就能使用了,此时同样可以使用POST或者GET接

收到提交的数据。

editor_里还有很多常用的配置项目,比如编辑器初始内容、编辑器高度等等,

需要配置时只需去掉该行代码前面的注释符号//即可。

使用定制版的童鞋可以下载一个完整版,里面的配置文件比较完整,有些东西可以

COPY过来。

五、UEditor代码高亮

UEditor代码高亮使用了第三方的高亮JS组件 – SyntaxHighlighter,在测试的过程

中问题不少,使用UEditor编辑器“插入代码”功能插入代码并提交到数据库后,在显示

页面代码是不会高亮显示的,需要在该页面加载一下JS和CSS文件。

href="ueditor/third-party/SyntaxHighlighter/"

/>

rel="stylesheet"

type="text/css"

还有一个问题,当再次使用UEditor编辑之前提交到数据库的代码时,编辑器会自动

过滤掉代码中的很多标签,今天在微博上@了一下UEditor团队,UEditor团队的人说需

要先转义。

我在提交至数据库之前用PHP的htmlspecialchars函数进行转义:

$content = htmlspecialchars($_POST[codeContent]);

输出页面执行htmlspecialchars_decode函数后输出:

echo htmlspecialchars_decode($Row["content"]);

再查看了官方的文档,官方推荐把textarea容器更换为script容器

此处采用了script标签作为编辑器容器对象,并设置了其类型是纯文本,从而在避免

了标签内部JS代码执行的同时解决了使用传统的textarea标签作为容器所带来的一次额

外转码问题,我同时使用了转义和更换textarea容器的方式。

简单测试了HTML、PHP、JAVASCRIPT和C++代码,暂时没发现问题。

总体来说,UEditor是一个很不错的富文本编辑器,但是由于开发时间不长,还需慢

慢完善。