vue 使用 wangeditor 富文本编辑器

wangeditor 是一个轻量级 web 富文本编辑器，配置方便，使用简单。

1）安装 wangeditor

终端安装 wangeditor 库：

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

2）页面绑定

创建一个 xxx.vue 页面，在 div 上设置 id：

<template>  
  <div>
      <div id="editor" style="background: #ffffff;">div>
  div>
template>  

3）页面引入

在 xxx.vue 页面 引入wangeditor：

import E from 'wangeditor'

4）配置wangeditor的配置项

在生命周期 mounted 里配置wangeditor 的配置项：

  mounted () {
   
    this.initialEditor()
  },
  methods: {
   
    initialEditor () {
   
      // 绑定div上的 editor
      this.editor = new E('#editor')
      // 获取输入的内容
      this.editor.config.onchange = html => {
   
        this.form.content = html;
      };
      // 上传图片到服务器
      this.editor.config.customUploadImg = (files, insertImgFn) => {
   
      // files 是 input 中选中的文件列表
      // insertImgFn 是获取图片 url 后，插入到编辑器的方法
      // 上传代码返回结果之后，将图片插入到编辑器中
      const params = new FormData();
      par