Quill - after.appendChild 不是函数

Question

这是代码沙盒复制品。

https://codesandbox.io/s/intelligent-chihiro-9rp0d?file=/src/index.js:1285-1329

---

我的应用程序中有一个位置，我需要在其中插入羽毛笔编辑器（禁用的编辑器）的内容，以便用户可以在发送之前预览撰写的电子邮件。

有一个称为“变量”的自定义膨胀。它用作占位符，并替换为服务器上的一些真实数据（当向多个收件人发送电子邮件时）。它由图片上的这些蓝色矩形表示。上面。

问题如下。即使我不使用任何这些自定义膨胀，如果整个消息正文看起来像一个字符串，其中至少有两个格式化块，我也会收到标题中指定的错误消息：“after.appendChild 不是函数” ”：

这是我在第3步（编辑时）的内容

这是在第 4 步预览时的效果（使用

quillInstance.setContents

方法插入）。

还有控制台。

那么我做了什么。我采用了通过

.setContents

方法插入新的鹅毛笔编辑器实例的实际数据对象，并尝试单独重现该问题（请参阅顶部的代码沙箱重现链接）。

我发现了一件有趣的事情。事实证明，如果您注释掉以下几行，问题就解决了：

Quill.register({
  "formats/Variable": Variable
});

所以看起来用不用膨胀都没关系；只有膨胀是否被记录才重要。如果是，那么代码将无法正常工作。

与

那么，我能做什么呢？将不胜感激任何帮助！

Answer 1

在我的例子中，我将 tagName 设置为

div

而不是

span

，现在问题似乎已得到解决。

在您的示例中，将

Variable

移至格式数组中的最后一个条目。

Answer 2

被困了一段时间后，我找到了两个快速解决方案。对于有同样问题的人，您可以：

1. 使用

   div

   而不是

   span

   作为印迹的

   tagName

   。

const Embed = Quill.import("blots/block/embed");

class CustomBlot extends Embed {
    // ... your code goes here
}

CustomBlot.blotName = "custom-blot-name";
CustomBlot.tagName = "div"; // use div instead of span

2. 如果您确实需要将

   tagName

   设为

   span

   ，您可以将印迹的

   className

   设置为任何字符串。

const Embed = Quill.import("blots/block/embed");

class CustomBlot extends Embed {
    // ... your code goes here
}

CustomBlot.blotName = "custom-blot-name";
CustomBlot.tagName = "span";
CustomBlot.className = "whatever-class-name"; // add this line if tagName is span