Quill编辑器自定义Divider Blot无法转换为HTML的问题求助

我之前也碰到过一模一样的问题，核心原因很简单：QuillDeltaToHtmlConverter默认只支持Quill内置的格式和Blots，你自定义的Divider Blot不在它的默认处理列表里，所以转换时直接被忽略了。好在这个转换器支持扩展自定义操作的处理逻辑，我们只需要给它加个配置就能解决。

具体解决方案 #

修改你后端创建QuillDeltaToHtmlConverter的代码，添加customOpHandlers配置，专门处理你的divider类型操作：

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, {
          customOpHandlers: {
            // 处理自定义的divider blot
            divider: (op, context) => {
              // 直接返回对应的HTML标签
              return '<hr/>';
            }
          }
        });
        const decodedHTML = converter.convert();
        console.log(decodedHTML);
        post.decoded_HTML = decodedHTML;
        res.render("post", {post: post});
      }
    });
  });
});

原理说明 #

customOpHandlers是转换器的扩展配置项，它是一个键值对对象：

• 键：对应你自定义Blot在Delta中的名称（这里就是divider）
• 值：一个处理函数，接收当前操作对象op和上下文context，返回你想要生成的HTML字符串

当转换器遍历Delta的ops时，遇到{"insert":{"divider":true}}这种操作，就会调用你定义的divider处理函数，把它替换成<hr/>标签。

如果你的自定义Blot需要携带额外属性（比如自定义class），还可以从op.insert.divider中读取对应的值，比如：

divider: (op, context) => {
  const className = op.insert.divider; // 假设Delta里是{"divider":"custom-hr"}
  return `<hr class="${className}"/>`;
}

验证效果 #

修改后再测试，你的Delta转换出来的HTML应该会变成：

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

这样就完美保留了水平分隔线，不需要再用隐藏编辑器的方式绕路啦。

内容的提问来源于stack exchange，提问作者ralpers