4_Day19

在前端项目中使用富文本编辑器

本次使用的富文本编辑器是wangeditor，需要先在项目中安装此富文本编辑器：

npm i wangeditor -S

然后，需要在main.js中配置：

import wangEditor from 'wangeditor';
Vue.prototype.wangEditor = wangEditor;

在需要使用富文本编辑器的视图中，先在视图的设计中，使用某个标签来表示需要显示富文本编辑器的区域，通常，使用<div>标签即可，后续，富文本编辑器将会显示在这个<div>内部，例如：

<el-form-item label="商品详情">
	<div id="wangEditor"></div>
</el-form-item>

然后，在data中声明对应的属性：

export default {
  data() {
    return {
      editor: {}, // 富文本编辑器
      // 省略不相关代码

并且，准备一个用于初始化富文本编辑器的函数：

initWangEditor() {
  this.editor = new this.wangEditor('#wangEditor');
  this.editor.create();
},

最后，在视图刚刚加载时，就调用此初始化函数：

mounted() {
    this.initWangEditor(); // 初始化富文本编辑器
    // 省略不相关代码
}