Wang Editor富文本编辑器Vue组件开发

业务需要，要搞一个富文本输入，简陋的搞了一个简单的富文本编辑器

大概长这样

1. 安装WangEditor

使用yarn或者npm进行WangEditor的安装

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

# 我用的这种
yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

2. 引入样式

直接贴在vue文件中即可，需要编写样式可在下面多谢一个style标签

<style src="@wangeditor/editor/dist/css/style.css"></style>

3. 基本页面

<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :default-config="toolbarConfig"
      :mode="mode"
    />
    <Editor
      v-model="html"
      style="height: 310px; overflow-y: hidden;"
      :default-config="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
  </div>
</template>

4. 配置WangEditor

（1）、 配置editorConfig

这一步除了处理图片，没有做其他配置，只做了基本功能，需要做其他功能可以参考WangEditor 官方文档

editorConfig: {
    placeholder: '请输入内容...', // 所有的菜单配置，都要在 MENU_CONF 属性下
    MENU_CONF: {
        // 配置上传图片
        uploadImage: {
        customUpload: this.uploadImg
        }
        // 继续其他菜单配置...
    }
},

（2）、配置toolbarConfig

这个主要是配置工具栏上需要显示/隐藏（toolbarKeys/excludeKeys）

我这里是做了需要隐藏哪些工具

所有的工具可参考WangEditor 工具栏所有默认配置

toolbarConfig: {
    excludeKeys: [
        'todo',
        'blockquote',
        'uploadVideo',
        'table',
        'code',
        'fullScreen',
        'numberedList',
        'fontFamily',
        'bulletedList',
        'uploadVideo',
        'codeBlock',
        'insertTable',
        'group-video',
        'headerSelect',
        'bgColor',
        'group-more-style',
        'divider',
        'group-indent',
        'insertVideo'
    ]
}

5. 创建editor

在创建组件的时候使用Object.seal(editor对象)，创建editor

onCreated(editor) {
    this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
}

6. 配置图片上传

这里要引入你自己的图片上传的API方法

uploadImg(file, insertFn) {
    // file 即选中的文件
    // 自己实现上传，并得到图片 url alt href
    const _this = this
    const fileObj = {}
    const formData = new FormData()
    formData.append('file', file)
    // 这个uploadFile是我的API方法，没贴出来，这里的要换成你的API方法
    uploadFile(formData)
    .then(res => {
        console.log('res', res)
        _this.$message.success('上传成功')
        // 最后插入图片
        console.log(res)
        // 回调函数
        insertFn(
        res.link,
        res.link,
        res.link,
        )
    })
    .catch(err => {
        console.log('err', err)
    })
    .finally(() => {
        console.log('finally')
    })
},

7. 组件使用

引入和组件声明没写，自己整一整

<WangEditor 
    @editorInput="handleEditorInput"
    :defVal="content">
</WangEditor>

handleEditorInput(html){
    this.content = html
}

完整代码

<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :default-config="toolbarConfig"
      :mode="mode"
    />
    <Editor
      v-model="html"
      style="height: 310px; overflow-y: hidden;"
      :default-config="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
  </div>
</template>

<script>
import { uploadFile } from '@/api/common.js'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// import { MessageBox } from 'element-ui'
export default {
  components: { Editor, Toolbar },
  props: {
    defVal: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 富文本框
      editor: null,
      html: '',
      editorConfig: {
        placeholder: '请输入内容...', // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {
            customUpload: this.uploadImg
          }
          // 继续其他菜单配置...
        }
      },
      mode: 'default', // or 'simple'
      toolbarConfig: {
        excludeKeys: [
          'todo',
          'blockquote',
          'uploadVideo',
          'table',
          'code',
          'fullScreen',
          'numberedList',
          'fontFamily',
          'bulletedList',
          'uploadVideo',
          'codeBlock',
          'insertTable',
          'group-video',
          'headerSelect',
          'bgColor',
          'group-more-style',
          'divider',
          'group-indent',
          'insertVideo'
        ]
      }
    }
  },
  watch: {
    defVal(newVal) {
      this.html = newVal
    }
  },
  mounted() {},
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onChange() {
      this.$emit('editorInput', this.html)
    },
    uploadImg(file, insertFn) {
      // file 即选中的文件
      // 自己实现上传，并得到图片 url alt href
      const _this = this
      const fileObj = {}
      const formData = new FormData()
      formData.append('file', file)
      uploadFile(formData)
        .then(res => {
          console.log('res', res)
          _this.$message.success('上传成功')
          // 最后插入图片
          console.log(res)
          insertFn(
            res.link,
            res.link,
            res.link,
          )
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {
          console.log('finally')
        })
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    }
  }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="scss" scoped>
::v-deep .w-e-text-placeholder {
  top: 7.5px;
}
</style>