Question

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

2022-12-20

2373

javascript vue.js vuejs3 quill vue-quill-editor

在我的 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>

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

contentType="html"

使用时不会显示错误

contentType="text"

我尝试过的方法

用 - 包装 QuillEditor 元素

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

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

Answer 1

在重新创建一些示例之后，我可以说 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 文档中阅读有关格式的更多信息。

Answer 2

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

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

工作 codesandbox 。