即学即用的富文本编辑器---wangEditor

在项目编写中，会遇到编写富文本编辑器。这里推荐一个比较容易上手且全面的富文本编辑器--wangEditor：里面拥有加粗、下划线、斜体、大小写、字体字号、排序、图片上传、表格等等文本编辑功能。

附带官网链接：快速开始 | wangEditor

一、安装步骤

按照需求安装下面相应包（是vue2安装对应vue2组件；vue3安装vue3组件）

安装 editor

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

安装react组件（可选）

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

安装vue2组件（可选）

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

安装 Vue3 组件(可选)

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

 二、使用步骤

安装过后，接下来是使用环节，如果不是很熟悉的前提下，尽量按照文档要求，创建一个空vue文件，将所有内容复制粘贴，然后按照需求进行修改。

点击左侧导航“基础-用于vue react”，选择适合的内容（这里选择vue2）

安装：

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

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

使用

HTML代码：

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

JS代码：

<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: { },
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
})
</script>

引入 style样式

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

-----------------------------------------复制到这里，我们可以得到一个简单的富文本模型（如图所示），然后根据配置项进行修改我们所需要的样式：-------------------------------------------------------

三、代码解读

1、<Toobar>和<Editor>标签，是组件变标签（从代码中components: { Editor, Toolbar }可看出是引入的两个组件在里面）。

<Toobar>可以设置工具栏样式（style）、工具栏配置（:defaultConfig="toolbarConfig"）、模式选择（:mode="mode"（值可选择mode&simple））

<Editor>可以设置编辑器的样式（如style="height: 300px; overflow-y: hidden;"）、输入数据双向绑定（v-model="html"）、编辑器配置（:defaultConfig="editorConfig"）、模式（:mode="mode"）以及生命周期函数（@onCreated="onCreated"  @onChange="onChange）

2、在data中我们可以配置一些数据：

html：-- 富文本编辑数据

toolbarConfig：{ } -- 菜单栏配置

        toolbarKeys：[ ] 可以重新配置工具栏，显示哪些菜单，以及菜单的排序、分组

        excludeKey: { } 排除掉某些菜单，其他都保留

editorConfig：{ } -- 编辑器配置

        readOnly = true 配置编辑器是否只读（默认为true）

        placeholder = ‘请输入内容...’ 

        onCreate（editor）{ this.editor = Object.seal(editor) }   编辑器创建完成时候的回调函数

        onChange （editor）{  }  编辑器内容、选区变化时候的回调函数

        onDestroyed（editor）{  }  编辑器销毁时的回调函数

        onBlur（editor）{ } 编辑器blur时候的回调函数

data() {
    return {
      editor: null,
      html: '<p>hello</p>', // 富文本编辑数据
      toolbarConfig: {
        toolbarKeys: [
          // 重新配置工具栏，显示哪些菜单，以及菜单的排序、分组。
          // 不配置，默认全显示
          'headerSelect', // 标题
          '|', // 分隔线
          'bold', // 粗体
          'underline', // 下划线
          'italic', // 斜线
          'color', // 文字颜色
          'bgColor', // 背景色
          'fontSize', // 字号
          'fontFamily', // 字体
          'lineHeight', // 行高
          'bulletedList', // 无序列表
          'numberedList', // 有序列表
          'todo', // 待办事项
          '|', //
          'emotion', // 表情
          'uploadImage', // 插入图片
          'insertLink', // 插入链接
          'insertTable', // 插入表格
          'codeBlock', // 代码块
          'divider', // 分割线
          '|', // 分隔线
          'undo', // 撤销
          'redo', // 重做
          'fullScreen', // 全屏
        ],
      },
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default', // or 'simple'
    }

3、方法methods中可以添加方法：

生命周期创建：onCreated（editor）{ this.editor = Object.seal(editor) }；这里一定要用 Object.seal() ，否则会报错

onCreated(editor) {
      // 生命周期--创建
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },

onChange（）{ console.log(this.html) } -- 数据发生变化时的操作，通常在这里接收文本编辑器中输入的数据

onChange() {
      console.log(this.html) // 接收富文本编辑器输入的数据
    },

4、组件销毁时，销毁编辑器

beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },

----------------------------------------------

关于菜单配置中的图片自定义插入

官网中配置代码

editorConfig.MENU_CONF['uploadImage'] = {
    // 自定义上传
    async customUpload(file: File, insertFn: InsertFnType) {  // TS 语法
    // async customUpload(file, insertFn) {                   // JS 语法
        // file 即选中的文件
        // 自己实现上传，并得到图片 url alt href
        // 最后插入图片
        insertFn(url, alt, href)
    }
}

代码实现：

首先在editorConfig中配置MENU_CONF: {}，用于配置上传地址

editorConfig: { placeholder: '请输入内容...', MENU_CONF: {} },

js代码部分

uploadImg() {
  let that = this 
// 这里的this指的是Vue实例对象，不是编辑器实例对象，所以需要保存this，
以便在编辑器实例对象中使用。
  this.editorConfig.MENU_CONF['uploadImage'] = { 
// 配置上传图片的参数,这里的this指的是组件实例
    // 自定义上传
    async customUpload(file, insertFn) {
      // JS 语法
      // file 即选中的文件 <input type='file'/>
      //表单上传文件时 multipart/form-data
      let formData = new FormData()
      console.log(formData)
      formData.append('file', file) //file 后台接受变量字段 file
      console.log(formData)
      //网络请求---------------------------
      // console.log('this-----',that);
      let res = await that.$api.batchUpload(formData)
      console.log(res.data)
      let { url, alt, href } = res.data
      // 自己实现上传，并得到图片 url alt href
      // 最后插入图片
      insertFn(url, alt, href)
     },
    }
   },
  },
  //vue组件生命周期函数--挂载组件完毕--------------------
  created() {
    //上传图片
    this.uploadImg()
  },

写到这里只是简单的运用编辑器，后续会继续更新~~~~