UEditor 之初体验后记 (2)

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

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

<script type="text/plain"> @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 中的图片上传到 和把 UMeditor 1.2.2 中的图片上传到 ,其实思路是一样的。

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 年初,我基于学习的目的,业余做了一个带新闻发布功能的网站。在这之前,我曾先后用过 和 ,印象中都还不错,但也都有着这样或者那样的问题,比如 CKEditor 中空格变问号的问题。

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

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

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

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

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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpxpxp.html