在vue项目中wangeditor富文本编辑器的使用

项目场景：

听搭档推荐一个还不错的编辑器wangeditor，记录一下。我有几个页面要用到wangeditor，其中包括在el-dialog组件上用到。

---

直接在页面中显示

我们绑定一个编辑器为div1，一个按钮为btn1

<template>
  <div>
   <div id="div1" style="margin: 4% 4% 3% 2%;">
          <p>欢迎使用 wangEditor 富文本编辑器</p>
        </div>
        <button id="btn1">获取html</button>
  </div>
</template>

在我们要写的页面引入wangeditor
在mounted写入以下代码，菜单为自定义的（不全）

<script>
// wangeditor引入编辑器
import E from 'wangeditor'


 mounted () {
    var editor = new E('#div1')
    this.editor = editor
    // 配置菜单栏，删减菜单，调整顺序
    editor.config.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'justify', // 对齐方式
      'undo', // 撤销
      'redo' // 重复
    ]
        // 创建编辑器
    editor.create()
    // 按钮
    document.getElementById('btn1').addEventListener('click', function () {
      // 读取 html
      alert(editor.txt.html())
    }, false)
</script>

---

在el-dialog对话框中添加wangeditor富文本编辑器

绑定富文本id为editorElem

<template>
<div>
 <el-dialog title="创建课程" :visible.sync="dialogFormVisible" @opened="show()"  @closed="hide()"  :before-close="handleClose" >
   <el-form ref="form" :model="form" >
   //其他省略。。。。。
     <el-form-item label="教学计划" :label-width="formLabelWidth">
              <div id="editorElem" ></div>
      </el-form-item>
    </el-form>
       <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="becreate">立即创建</el-button>
       </div>
</el-dialog>
  </div>
</template>

引入wangeditor
在dialog打开的时候show出editor，dialog关闭的时候摧毁editor

<script>
// wangeditor引入编辑器
import E from 'wangeditor'


 show () {
      var editor = new E('#editorElem')
      this.editor = editor
      // 配置菜单栏，删减菜单，调整顺序
      editor.config.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'justify', // 对齐方式
        'undo', // 撤销
        'redo' // 重复
      ]
      editor.create()
    },
    // 关闭时清空数据避免重叠
    hide () {
      // 销毁编辑器
      this.editor.destroy()
      this.editor = null
    }
</script>