Quill 中的自定义印迹格式未转换为 HTML

Question

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

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

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

}

访问博客 post 时，从数据库中检索增量并转换回 html 以供查看。这发生在后端。解码后的 HTML 被发送到我的 post 页面并用 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 时。带有水平线的 post 的 delta.ops 看起来像这样。

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

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

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

找不到水平线标记。我怎样才能正确解释并显示它？

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

Answer 1

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

我正在使用包 quill-delta-to-html 将我的 delta 转换回可用 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 在结束时所做的一切都是正确的。我失忆了，忘记了我依赖外部包来处理我的增量到 html 转换。添加此 customBlot 渲染可解决问题。

Quill 中的自定义印迹格式未转换为 HTML

Custom blot format in Quill not translating to HTML

html

javascript

node.js

quill