vue使用wang富文本编辑器

1. 安装wang富文本编辑器

使用npm安装：

npm install wangEditor --save

使用yarn安装：

yarn add wangEditor

2. 在Vue组件中引入wang富文本编辑器

在需要使用富文本编辑器的组件中引入wang富文本编辑器：

import wangEditor from 'wangeditor'

3. 初始化wang富文本编辑器

在组件的mounted生命周期钩子中初始化wang富文本编辑器：

mounted () {
  const editor = new wangEditor(this.$refs.editor)
  editor.create()
}

这里使用了ref来获取DOM元素，创建wangEditor实例并调用create()方法初始化富文本编辑器。

4. 获取富文本编辑器中的内容

在需要获取富文本编辑器中的内容时，可以使用wangEditor实例的txt或者html方法获取：

const editor = new wangEditor(this.$refs.editor)
editor.create()

// 获取纯文本内容
const content = editor.txt.text()

// 获取HTML内容
const htmlContent = editor.txt.html()

5. 设置富文本编辑器的内容

在需要设置富文本编辑器中的内容时，可以使用wangEditor实例的txt或者html方法设置内容：

const editor = new wangEditor(this.$refs.editor)
editor.create()

// 设置纯文本内容
editor.txt.text('这是一段纯文本内容')

// 设置HTML内容
editor.txt.html('<p>这是一段HTML内容</p>')

6. 完整代码

<template>
  <div>
    <div ref="editor"></div>
    <button @click="getContent">获取内容</button>
  </div>
</template>

<script>
import wangEditor from 'wangeditor'

export default {
  mounted () {
    const editor = new wangEditor(this.$refs.editor)
    editor.create()
  },
  methods: {
    getContent () {
      const editor = new wangEditor(this.$refs.editor)
      editor.create()

      const content = editor.txt.text()
      console.log(content)
    }
  }
}
</script>