- <template>
- <div>
- <div ref="editor"></div>
- </div>
- </template>
- <script>
- import wangEditor from 'wangeditor'
- export default {
- mounted() {
- // 创建 WangEditor 实例
- const editor = new wangEditor(this.$refs.editor)
- // 设置 HTML 内容
- editor.txt.html('<p>Vue 2.0 中的 <strong>WangEditor</strong> 示例。</p>')
- // 监听内容改变事件并获取 HTML 内容
- editor.config.onchange = function(html) {
- console.log(html)
- }
- // 渲染编辑器
- editor.create()
- }
- }
- </script>
注意:在 Vue 中使用 $refs 引用元素时,需要在元素上添加 ref 属性,并将其设置为要绑定的引用名称。在本例中,我们使用 ref="editor" 将 div 元素绑定到 $refs.editor 引用上。