UEditor 之初体验后记

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

1、UEditor 基本介绍

1.1、关于 UEditor

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

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

另外,UEditor 官方还提供了一个 Mini 版,名字叫 UMeditor。说是为了满足广大门户网站对于简单发帖框,或者回复框需求所定制的版本。主要改进点在加载速度和加载失败率上,且功能与 UEditor 也略有不同,具体可参考 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标签中,示例代码如下:

<script id="editor" type="text/plain" style="width:800px;height:300px;">
    @WebTools.RazorHelper.Raw(Model.Segment.Note)
</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 和把 UMeditor 1.2.2 中的图片上传到 阿里云 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 链接:

3、Web 编辑器杂谈

3.1、我与 UEditor 的曲折历程

2016 年初,我基于学习的目的,业余做了一个带新闻发布功能的网站。在这之前,我曾先后用过 FreeTextBoxFCKeditor(已更名为 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 字符串,那就替换为&nbsp;。C# 代码替换 HTML 字符串的示例如下:

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

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

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

posted @ 2019-07-18 23:08 韩宗泽 阅读(...) 评论(...) 编辑 收藏
回到顶部