UEditor 之初体验后记

本文初稿写于 3 年前，近期重新编辑整理，并进一步完善补充而成。

1、UEditor 基本介绍 1.1、关于 UEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

上面这句话出自 UEditor 官方。在我看来，UEditor 的核心特点就是：产自大厂、开源免费、功能全面（相当全）、体验较为切合国人习惯。想了解 UEditor 的更多信息，可参考以下几个链接：

另外，UEditor 官方还提供了一个 Mini 版，名字叫 。说是为了满足广大门户网站对于简单发帖框，或者回复框需求所定制的版本。主要改进点在加载速度和加载失败率上，且功能与 UEditor 也略有不同，具体可参考 。

1.2、UEditor 现状

UEditor 的最新版本是 v1.4.3.3，UMEditor 的最新版本是 v1.2.3。最后一次发布都在 2016 年下半年，都快 3 年没更新了。不过基本功能该有的也都有，且社区也比较认同和推崇，有不少人或组织都提供了特色的改进版或增强版，官方也偶有跟进。

综合来看，目前要在国内做相对复杂的资讯发布或留言功能，UEditor/UMEditor 依然是最好的选择之一。

2、UEditor 简单使用 2.1、将 UEditor 源码集成到项目中

如果你要在后端项目中集成 UEditor，那么直接下载对应语言版本的源码，解压之后拷贝到项目中即可。有两点需要注意：

1、官方只提供了 PHP、ASP、ASP.NET、JSP 四个版本，社区里有人提供了 Note.js、Python 等语言的版本。

2、官方说提供的所有后端代码都仅为 DEMO 作用，切不可直接用到生产环境中。平心而论，ASP.NET 版的后端代码写的确实水，不过前端能写出这些后端代码就已经很牛掰了，我是把用到的那部分代码从头到尾改了一遍才用到生产环境中的。

如果你要在前端项目中集成 UEditor，那就看你需不需要上传图片等后端功能了。如果不需要，那么直接拷贝到前端项目中即可。但如果需要，那就得确保跑前端的 Web 服务器能解析对应的后端代码了。

当然，如果你把 UEditor 单独部署到一个支持后端的 Web 服务器上也是可行的。另外，集成 UMeditor 的方法与集成 UEditor 方法完全一样。

2.2、让 UEditor 的 UI 呈现在页面中

1、首先，需要在页面中引入 UEditor 的 3 个 js 文件，示例如下：

<!-- 编辑器的配置文件，前端配置都在这个文件中，注释十分丰富 --> <script type="text/javascript" charset="utf-8" src="http://www.likecs.com/ueditor-1.4.3/ueditor.config.js"></script> <!-- 编辑器的源码文件 --> <script type="text/javascript" charset="utf-8" src="http://www.likecs.com/ueditor-1.4.3/ueditor.all.min.js"></script> <!-- 编辑器的中文语言包 --> <script type="text/javascript" charset="utf-8" src="http://www.likecs.com/ueditor-1.4.3/lang/zh-cn/zh-cn.js"></script>

2、然后，在页面中需要呈现 UEditor 的地方放置如下“占位符”代码（注意给个 ID，下一步要用）：

<!-- 编辑器的容器 --> <script type="text/plain"></script>

3、最后，通过一句实例化编辑器的代码来获得编辑器实例（页面运行起来时 UI 就会呈现出来）：

$(function () { var ue = UE.getEditor("editor"); // 创建编辑器实例（这里的 editor 就是上一步中的 ID） });

得到编辑器实例对象之后，就可以通过它来调用 UEditor 的哪些 API 了。具体有哪些 API 可用，参见 。

2.3、用 UEditor 的过程中遇到的两个坑

1、坑一，获取内容可以而设置内容却报错。

我用getContent获取编辑器的内容并存入数据库，然后把存到数据库中的内容用setContent赋给编辑器。结果运行起来发现保存入库可以，而打开编辑页面直接就报错了，编辑器也没显示出来。

后来发现这个是因为编辑器还没准备好，所以就不能赋值，只需要把赋值操作放到ready之后即可，示例代码如下：

ue.addListener("ready", function () { ue.setContent("@Model.Content"); // 等编辑器准备好之后再赋值，否则报错 });

为了写这篇文章，我尝试了重现那个错误，结果编辑器又显示出来了，但依然会报错，错误消息是“Uncaught TypeError: Cannot set property 'innerHTML' of undefined”。

从某种程度上说，这个问题并不算是坑。因为官方手册中就有相关说明和建议——“对编辑器的操作最好在编辑器ready之后再做”，不过我这人特别怕麻烦，凡是能凭猜测搞定的就不愿细看文档，所以第一次用的时候就掉坑了。

2、坑二，编辑器内显示的是的 HTML，而不是文本内容。