未捕获的类型错误：无法读取未定义的属性（读取“发出”）VueQuill Vue3

Question

赏金将在 6 天后到期。 此问题的答案有资格获得+50声望赏金。 bsod_想提请更多人注意这个问题。

在我的 vue3 应用程序中使用 VueQuill，我在尝试显示 html 字符串时收到以下控制台错误 -

我的代码 -

<template>
  <div class="">
      <QuillEditor v-model:content="data" contentType="html" />
  </div>
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
  name: 'HomeView',
  components: {
    QuillEditor
  },
  setup(){
    const data = "<div><p>test test test</p></div>"

    return {
      data
    }
  }
}
</script>

此错误仅在使用以下道具时出现

contentType="html"

使用时不显示错误

内容类型=“文本”

我试过的

用 - 包装 QuillEditor 元素

<div v-if="data !== undefined">
  <QuillEditor v-model:content="data" contentType="html" />
</div>

确保在创建 QuillEditor 之前装载数据，但这不起作用。

Answer 1

我认为编辑器解析了 html 内容并将其转换为 Quill“内部节点”。 显然，Quill编辑器中没有“div”标签的节点，因此编辑器的内容为null，初始化失败。

解决方案，将 html 的内容更改为对 Quill 编辑器有意义的内容，例如<h1>This is a heading</h1>或者，以您的示例为例， <p>test test test</p> 。

工作代码和框。

Answer 2

重新创建一些示例后，我可以说div不是 Quill 导出或以其 HTML 格式使用的 HTML 标签。

如果您在 Quill 编辑器中编写任何内容并导出其 HTML，那么您会注意到它生成了哪些 HTML 标签。 例如，在编辑器中键入任何文本并使用所有工具栏选项对其进行格式化，然后查看编辑器导出的 HTML-

它看起来像这样-

<ul><li><strong style="background-color: rgb(255, 255, 255);">Lorem <em><u>Ipsum</u></em></strong><span style="background-color: rgb(255, 255, 255);">&nbsp;is simply dummy text of the printing and typesetting industry. </span></li></ul><ol><li><strong style="background-color: rgb(255, 255, 255);">Lorem <em><u>Ipsum</u></em></strong><span style="background-color: rgb(255, 255, 255);">&nbsp;is simply dummy text of the printing and typesetting industry. </span></li></ol> 

您可以在这里看到导出的 HTML 中没有使用div标签，所有标签都是格式化标签（粗体、斜体、列表等），这可能是您使用contentType="html"时的原因，它会尝试匹配有效的 HTML 标签并失败。

这是工作沙盒，您可以在控制台中检查导出的 HTML。 （在编辑器中键入任何内容，使用所有工具栏选项对其进行格式化，并在从编辑器中聚焦时看到 HTML。）

如果您将从您的示例中删除div标记并仅尝试<p>test test test</p> ，它将起作用，因为根据其结构p是有效的 HTML 标记。

您可以在Quill Delta 文档中阅读有关格式的更多信息。