UEditor 之初体验后记

柔情只为你懂 2021-12-02 19:53 289阅读 0赞

*  **1、UEditor 基本介绍**
    
     *  1.1、关于 UEditor
     *  1.2、UEditor 现状
 *  **2、UEditor 简单使用**
    
     *  2.1、将 UEditor 源码集成到项目中
     *  2.2、让 UEditor 的 UI 呈现在页面中
     *  2.3、用 UEditor 的过程中遇到的两个坑
     *  2.4、将 UEditor 中的图片上传到云服务器上
 *  **3、Web 编辑器杂谈**
    
     *  3.1、我与 UEditor 的曲折历程
     *  3.2、CKEditor 空格变问号的原因及解决办法

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

## 1、UEditor 基本介绍 ##

#### 1.1、关于 UEditor ####

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

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

*  [UEditor 的官网首页][UEditor]
 *  [UEditor 的 GitHub][UEditor _ GitHub]
 *  [UEditor 文档][UEditor 1]

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

#### 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="/ueditor-1.4.3/ueditor.config.js"></script>
    
    <script type="text/javascript" charset="utf-8" src="/ueditor-1.4.3/ueditor.all.min.js"></script>
    
    <script type="text/javascript" charset="utf-8" src="/ueditor-1.4.3/lang/zh-cn/zh-cn.js"></script>

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

<script id="editor" type="text/plain" style="width:800px; height:300px;"></script>

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

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

得到编辑器实例对象之后，就可以通过它来调用 UEditor 的哪些 API 了。具体有哪些 API 可用，参见 [UEditor 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，而不是文本内容**。

一开始还怀疑这会不会是 UEditor 的 Bug，直到把这个问题解决之后，反过来想才发现这里面其实隐含了一个容易被忽略的“常识”，那就是网页的模版引擎一般都会编码字符串，比如我曾用过的 WebForms、NVelocity 和 RazorEngine 都是这样。

换句话说，这时候编辑器拿到的是经过编码之后 HTML，也就是说只要我们能确保编辑器拿到的是编码前的 HTML 就行了。当然一开始我还没想到是这个原因，于是我的解决办法是根据曾使用其它编辑器的经验试出来的，就是直接把内容放到`script`标签中，示例代码如下：

在我意识到这个问题的始作俑者是网页模版引擎而不是 UEditor 的时候，我做了如下测试：

ue.addListener("ready", function () {
        editor.setContent("@WebTools.RazorHelper.Raw(Model.Segment.Note)");
    });

果然也是 OK 的，这也进一步证明了我的猜想是正确的！

#### 2.4、将 UEditor 中的图片上传到云服务器上 ####

由于 UEditor 默认是将图片上传到网站根目录下的一个子文件夹中，如果是企业内部的信息系统，这么做也还行，但如果是互联网项目，这种做法就显得既不安全、也不经济的了，最好还是上传到云服务器上。

要把 UEditor 中的图片上传到云服务器上，只需要修改后端代码的上传逻辑即可。我做过用 ASP.NET 把 UEditor 1.4.3 中的图片上传到 [又拍云 USS][USS] 和把 UMeditor 1.2.2 中的图片上传到 [阿里云 OSS][OSS]，其实思路是一样的。

UEditor 的 ASP.NET 核心上传逻辑在`UploadHandler`类的`Process`方法中，将上传图片到本地的那部分代码替换成如下示例代码即可。

try {
        // 校验文件类型、文件大小等......
        String fileMd5 = StringSecurity.GetMd5(uploadFileBytes); // 用文件的 MD5 值做文件名
        String fileName = fileMd5 + Path.GetExtension(uploadFileName);
        String filePath = $"/images/{DateTime.Now.ToString("yyMMdd")}/{fileName}";
        // 调用又拍云的 SDK 来上传文件
        UpYun upyun = new UpYun("bucketname", "username", "password");
        upyun.setContentMD5(fileMd5);
        bool upyunResult = upyun.writeFile(filePath, uploadFileBytes, true);
        // ......
    } catch (Exception e) {
        logger.Error("文件上传失败！", e);
        // ......
    }

UMeditor 的 ASP.NET 核心上传逻辑在`Uploader`类的`upFile`方法中，将上传图片到本地的那部分代码替换成如下示例代码即可。

try {
        // 校验文件类型、文件大小等......
        String fileName = $"{GuidHelper.LowerPureString}.{getFileExt()}";
        String filePath = $"images/{DateTime.Now.ToString("yyMMdd")}/{fileName}";
        // 调用阿里云的 SDK 来上传文件
        var client = new OssClient(SrcPoint, AccessKeyId, AccessKeySecret, 
            new Aliyun.OSS.Common.ClientConfiguration() { IsCname = true });
        var putResult = client.PutObject(SrcBucket, filePath, uploadFile.InputStream);
        // ......
        var uri = client.GeneratePresignedUri(SrcBucket, filePath);
        URL = uri.GetLeftPart(UriPartial.Path); // 将文件路径赋值给编辑器引用的变量
    } catch (Exception e) {
        logger.Error("文件上传失败！", e);
        // ......
    }

可能你看到本文时，又拍云和阿里云的云存储 SDK 已经做了较大改动，这里附上二者的 GitHub 链接：

*  [upyun-c-sharp-sdk][]
 *  [aliyun-oss-csharp-sdk][]

## 3、Web 编辑器杂谈 ##

#### 3.1、我与 UEditor 的曲折历程 ####

2016 年初，我基于学习的目的，业余做了一个带新闻发布功能的网站。在这之前，我曾先后用过 [FreeTextBox][] 和 [FCKeditor（已更名为 CKEditor）][FCKeditor_ CKEditor]，印象中都还不错，但也都有着这样或者那样的问题，比如 [CKEditor 中空格变问号的问题][CKEditor]。

我上网搜了一下，发现大家对 UEditor 的评价还不错，于是决定 Web 编辑器就用 UEditor，由于是第一次用，过程相对曲折。做完新闻发布功能之后，就顺带记录了一下，也就是本文初稿。

两年之后，也就是去年，公司要做个带资讯发布功能的媒体网站，在我的建议下，最终选用了 UMeditor。但整个团队除我之外都没用过，尤其是那几个前端，连富文本编辑器是啥都不知道，最后就由我负责带领前端来做这块儿的功能。

因为这次做的是实际项目，公司的编辑们都在用，后台的 UI 框架也由 jQuery 版的 EasyUI 变成了 React 版的 Ant Design，所以遇到的细节问题也比较多。其中对编辑器的各种配置和后端改造，都是由我统一解决好再跟前端对接的。

又过了一年，也就是本月初，我在整理资料时再次看到了本文初稿。瞬间就想起我去年用 UMeditor 的过程中也做过一些记录，然后就想着干脆把两次的记录整合起来，结果怎么都找不到去年的记录，只好作罢。也许还留在那家公司的电脑里吧！

#### 3.2、CKEditor 空格变问号的原因及解决办法 ####

经查，导致该问题的根本原因是编码转换。在 UTF-8 里有一个特殊的编码`0xC2 0xA0`，转换成字符的时候，表现为一个空格，跟普通的半角空格一样，不同的是它的宽度不会被压缩，因此常被用来做网页排版。而在 GB2312、Unicode 等字符集中却没有这个编码，因此如果简单地进行编码转换，这个编码就会被替换成问号。

前些年在实际项目中还遇到过更奇葩的情况，文章保存之后，内容中的问号就全都没了。后来发现是别人也遇到了空格变问号的问题，但选错了解决方案，他是直接把问号又替换成空格，结果正常的问号也被毙掉了。

正确的做法是，用 UTF-8 格式的编码进行替换，把那个特殊的空格替换为普通的空格，如果是 HTML 字符串，那就替换为` `。C\# 代码替换 HTML 字符串的示例如下：

byte[] space = new byte[]{0xc2,0xa0};
    string utfSpace = Encoding.GetEncoding("UTF-8").GetString(space);
    htmlStr = htmlStr.Replace(utfSpace," ");

注意：在替换之前不能进行编码转换，一定要继续使用 UTF-8 编码。如果已经转换成其它编码，那就彻底没救了，因为这时候错误的问号和正常的问号之间已经没有分别了。

> **本文链接**：[http://www.cnblogs.com/hanzongze/p/js-ueditor.html][http_www.cnblogs.com_hanzongze_p_js-ueditor.html]  
> **版权声明**：本文为博客园博主 [**韩宗泽**][Link 1] 原创，作者保留署名权！欢迎通过转载、演绎或其它传播方式来使用本文，但必须在明显位置给出作者署名和本文链接！个人博客，能力有限，若有不当之处，敬请批评指正，谢谢！

转载于:https://www.cnblogs.com/hanzongze/p/js-ueditor.html

[UEditor]: http://ueditor.baidu.com/website/index.html#target_blank
[UEditor _ GitHub]: https://github.com/fex-team/ueditor#target_blank
[UEditor 1]: http://fex.baidu.com/ueditor/#target_blank
[UMeditor]: https://ueditor.baidu.com/website/umeditor.html#target_blank
[UMeditor _ GitHub]: https://github.com/fex-team/umeditor#target_blank
[UEditor API]: https://ueditor.baidu.com/doc/#target_blank
[USS]: https://www.upyun.com/products/file-storage#target_blank
[OSS]: https://www.aliyun.com/product/oss#target_blank
[upyun-c-sharp-sdk]: https://github.com/upyun/c-sharp-sdk#target_blank
[aliyun-oss-csharp-sdk]: https://github.com/aliyun/aliyun-oss-csharp-sdk#target_blank
[FreeTextBox]: http://www.freetextbox.com/#target_blank
[FCKeditor_ CKEditor]: https://ckeditor.com/#target_blank
[CKEditor]: http://www.cnblogs.com/hanzongze/p/js-ueditor.html#32%23target_blank
[http_www.cnblogs.com_hanzongze_p_js-ueditor.html]: http://www.cnblogs.com/hanzongze/p/js-ueditor.html
[Link 1]: http://www.cnblogs.com/hanzongze/