Vue项目中使用富文本编辑器

1.先安装富文本编辑器
使用命令
npm install wangeditor --save
注意：进入项目的目录下输入上面的命令，如下图

2.在vue项目中找到main.js文件
导入富文本编辑依赖
import wangeditor from ‘wangeditor’
并将依赖加载成全局变量
Vue.prototype.wangEditor = wangeditor

3.在页面中定义富文本编辑器的位置

      <el-form-item label="文章内容">
        <div id="contentId"></div>
      </el-form-item>

4.使用钩子函数创建富文本编辑器并挂在到该位置

mounted() {
    //钩子函数 在页面加载完成就执行该方法中的内容
    this.editor = new this.wangEditor('#contentId')
    this.editor.create()
}