Delphi 12.2 新出的 WebStencil 组件和 Quill 编辑器配合的问题

pcplayer2024-09-30 10:27

Quill editor 是一个很不错的开源的前端浏览器页面里使用的富文本编辑器。

如果我们使用 Delphi 12.2 最新推出的 webStencil 组件来开发一个 WEB 程序，又使用了类似的富文本编辑器，有一个小问题需要注意。

问题描述

在富文本编辑器里面输入的文字，有各种格式。提交保存后，把保存的内容读取出来呈现到页面上，页面显示出来的文字没有格式，额外多了一些奇怪字符。

问题原因

首先，Quill Editor 输出的文字，其格式化比如粗体，其实就是标准的 html 标记比如 <strong>这是粗体文字</strong>

我在服务器端的程序不使用 WebStencil 而是直接把保存的内容写到一个页面上，页面上能正确显示出来之前在富文本编辑器里面的格式。测试代码大致如下：

Delphi 复制代码

Response.Content := '<html><head></head><body>' + MyRichContent + '</body></html>';

而正式的页面是使用 WebStencil 来输出的。也就是页面文件里面，需要显示内容的地方，我使用了一个 WebStencil 的标记：

Delphi 复制代码

@MyDoc.Content

查文档，里面提到：

Note: The output of values processed by WebStencils is encoded using the TNetEncoding.HTML.Encode method. You can suppress any encoding by using the syntax @\value.

马上试试，把页面里面的标记修改为以下标记：

Delphi 复制代码

@\MyDoc.Content

再次刷新浏览器，正确的格式出来了。

总结：

@ 符号后面不加斜杠，WebStencil 会把内容使用 TNetEncoding.HTML.Encode 来编码，就把文字格式需要的尖括号"<"和" >" 给转义成了 < 和 > 使得页面上直接显示其转义符号而不是根据加括号显示出文字的格式来。而使用 @ 符号后面加个斜杠，则内容被 WebStencil 处理的时候不会去编码，相当于直出，问题就不存在了。

感想

使用 WebStencil 来做页面，确实比自己去处理页面字符串，可以少写很多代码，整个代码看起来也舒服很多。看起来这个玩意还是很有用的。