vue2.0中使用wangEditor set HTML

要在 Vue 2.0 中使用 WangEditor 设置 HTML 内容，可以在 mounted 生命周期函数中获取 WangEditor 实例，并且使用 $refs 引用要绑定的 DOM 元素。然后，可以使用 txt.html() 方法将 HTML 内容设置为编辑器的内容。以下是一个简单的示例组件代码，演示如何使用 WangEditor 在 Vue 2.0 中设置 HTML 内容：
  1. <template>
  2.   <div>
  3.     <div ref="editor"></div>
  4.   </div>
  5. </template>

  7. <script>
  8. import wangEditor from 'wangeditor'

  10. export default {
  11.   mounted() {
  12.     // 创建 WangEditor 实例
  13.     const editor = new wangEditor(this.$refs.editor)

  15.     // 设置 HTML 内容
  16.     editor.txt.html('<p>Vue 2.0 中的 <strong>WangEditor</strong> 示例。</p>')

  18.     // 监听内容改变事件并获取 HTML 内容
  19.     editor.config.onchange = function(html) {
  20.       console.log(html)
  21.     }

  23.     // 渲染编辑器
  24.     editor.create()
  25.   }
  26. }
  27. </script>
在这个示例中，我们要在 mounted 生命周期函数中获取 DOM 元素，并创建 WangEditor 实例。然后，使用 txt.html() 方法将指定的 HTML 设置为编辑器的内容，并在 config.onchange 回调中打印编辑器的 HTML 内容。最后，通过调用 editor.create() 方法渲染编辑器。

注意：在 Vue 中使用 $refs 引用元素时，需要在元素上添加 ref 属性，并将其设置为要绑定的引用名称。在本例中，我们使用 ref="editor" 将 div 元素绑定到 $refs.editor 引用上。