Uncaught TypeError: не удается прочитать свойства неопределенного (чтение «испускать») VueQuill Vue3
Используя VueQuill в моем приложении vue3, я получаю следующую ошибку консоли при попытке показать строку 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>
Эта ошибка появляется только при использовании следующей опоры
тип содержимого = "html"
Ошибка не отображается при использовании
тип содержимого = "текст"
Что я пробовал
Обертывание элемента QuillEditor с помощью -
<div v-if = "data !== undefined">
<QuillEditor v-model:content = "data" contentType = "html" />
</div>
Чтобы убедиться, что данные смонтированы перед созданием QuillEditor, это не работает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я думаю, что редактор анализирует html-контент и преобразует его во «внутренние узлы» Quill. И, по-видимому, в редакторе Quill нет узла для тега «div», поэтому содержимое редактора равно нулю, и его не удается инициализировать.
Решение: измените html-контент на то, что имеет смысл для редактора Quill, например <h1>This is a heading</h1> или, например, <p>test test test</p>.
Рабочие коды и ящик.
После воссоздания некоторых примеров я могу сказать, что div — это не HTML-тег, который Quill экспортирует или использует в своем 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);"> 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);"> is simply dummy text of the printing and typesetting industry. </span></li></ol>
Здесь вы можете видеть, что тег div не использовался в экспортированном HTML, все теги являются форматированными тегами (полужирный, курсив, список и т. д.), и это может быть причиной, когда вы используете contentType = "html", он пытается сопоставить допустимый тег HTML и терпит неудачу.
Вот Рабочая песочница, где вы можете изучить экспортированный HTML-код в консоли. (Введите что-нибудь в редакторе, отформатируйте его, используя все параметры панели инструментов, и просмотрите HTML-код, выйдя из редактора.)
Если вы удалите тег div из своего примера и попробуете только <p>test test test</p>, это сработает, потому что p является допустимым тегом HTML в соответствии со своей структурой.
Вы можете узнать больше о форматах в документации Quill Delta.