vue 使用wangEditor

如果你想在Vue项目中使用wangEditor富文本编辑器，你可以按照以下步骤进行操作：

1. 安装wangEditor：在终端中进入项目根目录，运行以下命令安装wangEditor：

“`shell

npm install wangeditor –save

“`

2. 引入wangEditor：在需要使用的组件中，使用import语句引入wangEditor：

“`javascript

import Editor from ‘wangeditor’

//其他import语句…

“`

3. 创建编辑器实例：在Vue的`mounted`生命周期钩子函数中创建编辑器实例，并进行配置：

“`javascript

mounted() {

const editor = new Editor(this.$refs.editorRef) //editorRef为你给编辑器DOM元素加上的ref

editor.config.placeholder = ‘请输入内容’ //设置编辑器的placeholder

editor.create()

//将编辑器实例赋值给data中的某个变量

this.editorInstance = editor

}

“`

4. 使用编辑器：在需要使用编辑器的地方，通过两种方式使用编辑器内容，例如保存到data中或者直接提交数据：

a. 保存到data中：使用wangEditor提供的`txt`方法获取编辑器中的内容并保存到data中的变量中：

“`javascript

//保存编辑器内容到data中的变量

saveContent() {

const content = this.editorInstance.txt.html()

this.$data.content = content

}

“`

b. 直接提交数据：监听wangEditor提供的`change`事件，获取最新的编辑器内容并提交：

“`javascript

//监听编辑器内容变化

onContentChange() {

this.editorInstance.txt.on(‘change’, () => {

const content = this.editorInstance.txt.html()

//提交逻辑请根据具体情况处理

})

}

“`

注意：上述代码仅为简单示例，具体使用请根据你的项目需求进行调整。