Quill 中的自定义印迹格式无法转换为 HTML答案

【问题标题】：Custom blot format in Quill not translating to HTMLQuill 中的自定义印迹格式无法转换为 HTML
【发布时间】：2021-07-22 22:09:52
【问题描述】：

我正在将 Quill 设置为在博客项目中用作富文本编辑器。我的编辑器工作正常，可以将用户帖子存储在 mongoDB 中，稍后检索它们并显示它们。

我执行此操作的代码包括从 quill 中获取 delta，对其进行字符串化，然后将其编码为 URI。这是存储在我的数据库中的内容。这些操作发生在点击我的发布按钮但在提交表单之前。我还将纯文本存储用于其他目的。

function parseQuill(){
document.getElementById("body").value = encodeURIComponent(JSON.stringify(quill.getContents()));
document.getElementById("bodyText").value = quill.getText();
document.getElementById("compose-form").submit();

}

访问博客文章时，将从数据库中检索增量并转换回 html 以供查看。这发生在后端。解码后的 HTML 被发送到我的帖子页面并使用 ejs 呈现。

app.get("/posts/:postID", function(req, res){
User.findOne({name: "user1"}, function(err, foundUser){
let posts = foundUser.posts;
posts.forEach(function(post){
if (post._id == req.params.postID){
    const decoded = JSON.parse(decodeURIComponent(post.content));
    const converter = new QuillDeltaToHtmlConverter(decoded.ops);
    const decodedHTML = converter.convert();
    console.log(decodedHTML);
    post.decoded_HTML = decodedHTML;
    res.render("post", {post: post});
  }
 }
 );
 });
 });

这适用于 quill 提供的所有默认格式。

我一直在遵循 Quill 指南“Cloning medium with parchment”并尝试实现自定义分隔线印迹。我的代码与那里发生的情况相同，但没有 jQuery。我的水平线出现在文本编辑器中并按预期运行。

我的问题是在保存增量并尝试将其转换回 html 时出现的。带有水平规则的帖子的 delta.ops 看起来像这样。

 {"ops":[
 {"insert":"Some text followed by a horizontal rule.\n"},
 {"insert":{"divider":true}},
 {"insert":"Some more text.\n"}]}"

代表水平线的线是“divider”的第二条insert语句：true。将其存储为 URI 组件并将其解码回 HTML 后，HTML 如下所示：

<p>Some text followed by a horizontal rule.<br/>Some more text.</p>

水平线标记无处可寻。我怎样才能得到正确解释并显示出来？

如果我在我的帖子页面上生成一个隐藏的 Quill 编辑器容器，我可以加载纯 delta 并使用 quill.root.innerHTML 提取 html。这将生成包含 HR 的 HTML。如果可能的话，我希望避免插入隐藏的羽毛笔容器。

【问题讨论】：

请看这里：github.com/quilljs/quill/issues/1866
@Alamin 您认为该链接与什么相关？该讨论是关于人们试图获得一个扩展 Inline 类以甚至显示在编辑器中的跨度。我正在扩展 BlockEmbed 类，并且我的水平规则在编辑器中的行为完全符合预期。将增量转换回 HTML 时会出现问题。我尝试更改 format() 以返回 DividerBlot.tagName，但它仍然在增量中显示为“divider: true”。

标签： javascript html node.js quill

【解决方案1】：

我是个白痴，错过了 html 解码过程中的一个重要步骤。把这个问题留给这个答案（这解决了问题），以防其他人偶然发现一个精神无能的时刻。

我使用包quill-delta-to-html 将我的增量转换回可用的html。当然这个包不知道如何注册自定义印迹。您必须在转换之前手动执行此操作。

const dividerOp = {
      insert: {
        type: "divider",
        value: true
      },
      attributes: {
        renderAsBlock: true
      }
    }
    converter.renderCustomWith(function(dividerOp){
      if (dividerOp.insert.type === "divider"){
        return "<hr>"
      } else {
        console.log("custom blot convert error");
      }
    });
    const decodedHTML = converter.convert();

Quill 做的一切都是正确的。我的记忆出现了失误，忘记了我依赖外部包来处理我的 delta 到 html 的转换。添加这个 customBlot 渲染解决了这个问题。

【讨论】：