vue-quill-editor.js 回写百度编辑器生成的html

百度编辑器生成的 HTML 回写到 vue-quill-editor 中，你需要使用 VueHtml5Editor 插件来解析百度编辑器的 HTML，然后将解析后的内容设置为 vue-quill-editor 的初始值。

以下是一个简单的示例代码，它演示如何将百度编辑器生成的 HTML 回写到 vue-quill-editor：

首先安装和引入 VueHtml5Editor：

npm install vue-html5-editor --save
然后在代码中引入和使用 VueHtml5Editor：
  1. <template>
  2.   <div>
  3.     <quill-editor v-model="content" :options="editorOptions"></quill-editor>
  4.   </div>
  5. </template>

  7. <script>
  8. import { VueHtml5Editor } from 'vue-html5-editor'

  10. export default {
  11.   data() {
  12.     return {
  13.       content: '',
  14.       editorOptions: {
  15.         modules: {
  16.           toolbar: [...]
  17.         },
  18.         theme: 'snow'
  19.       }
  20.     }
  21.   },
  22.   mounted() {
  23.     VueHtml5Editor.config.use("default", {
  24.       // 配置项
  25.     })
  26.     // 解析百度编辑器的 HTML
  27.     const baiduHtml = "<p>百度编辑器生成的 HTML</p>"
  28.     VueHtml5Editor.getParser("default")().parse(baiduHtml, (error, nodes) => {
  29.       if (!error) {
  30.         // 设置 vue-quill-editor 的初始值
  31.         this.content = nodes.length > 0 ? nodes[0].innerHTML : ''
  32.       }
  33.     })
  34.   }
  35. }
  36. </script>
在这个示例中，我们使用 VueHtml5Editor 解析百度编辑器生成的 HTML。首先，我们在 mounted 钩子函数中配置 VueHtml5Editor 并解析百度编辑器的 HTML。当解析完成后，我们将解析后的 HTML 设置为 vue-quill-editor 的初始值。

注意：如果你在 vue-quill-editor 上定义了 maxlength 属性，并且百度编辑器生成的 HTML 超过了 maxlength 的限制，则 vue-quill-editor 中将不会显示任何内容。如果需要解决这个问题，请在 VueHtml5Editor.getParser() 方法中添加 stripIgnoreTag() 和 truncate() 方法来处理解析后的 HTML。