wangEditor-v5使用

1、介绍

wangeditor基于 slate 内核开发，但不依赖于 React ，所以它本身是无框架依赖的。并且，官方封装了 Vue React 组件，可以很方便的用于 Vue React 等框架。

本文介绍的是wangeditor v5版本，所用到的项目例子和版本是vue3+wangeditor v5

2、安装

安装 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

3、创建编辑器

项目准备前，需安装 @wangeditor/editor 和 @wangeditor/editor-for-vue@next

在vue3项目中的文件中新建模板

<template>
    <div style="border: 1px solid #ccc">
      <Toolbar
        :editorId="editorId"
        :defaultConfig="toolbarConfig"
        :mode="mode"
        style="border-bottom: 1px solid #ccc"
      />
      <Editor
        :editorId="editorId"
        :defaultConfig="editorConfig"
        :defaultContent="getDefaultContent"
        :mode="mode"
        style="height: 500px"
      />
    </div>
</template>

<script>
import { computed, onBeforeUnmount, ref } from 'vue'
import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'
import cloneDeep from 'lodash.clonedeep'

export default {
  components: { Editor, Toolbar },
  setup() {
    const editorId = 'editor' //【注意】编辑器 id ，要全局唯一

    const defaultContent = []
    const getDefaultContent = computed(() => { // 注意，要深拷贝 defaultContent ，否则报错
      return cloneDeep(defaultContent.value)
    }
   ) // 注意，要深拷贝 defaultContent ，否则报错

    const toolbarConfig = {}
    const editorConfig = { placeholder: '请输入内容...' }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
        const editor = getEditor(editorId)
        if (editor == null) return
        setTimeout(() => { //此处最好异步处理，否则销毁编辑器可能会报错
          editor.destroy()
      	}, 100)
        removeEditor(editorId)
    })

    return {
      editorId,
      mode: 'default',
      getDefaultContent,
      toolbarConfig,
      editorConfig,
    };
  }
}
</script>   
<style src="@wangeditor/editor/dist/css/style.css"></style> //引入样式

toolbarConfig可以设置需要或者不需要的工具栏选项

 const toolbarConfig = {
      excludeKeys: ["fullScreen", "code", "codeBlock", "bulletedList", 		      "numberedList", "blockquote", "bold", "italic"] //此处不需要的工具栏选项
}

 想要获取工具栏选项可以执行一下代码

import { DomEditor } from '@wangeditor/editor'      
const toolbar = DomEditor.getToolbar(editor)
const menu = editor.getAllMenuKeys()
const bar = toolbar.getConfig().toolbarKeys

4、异步设置内容

如果需要从接口获取内容，渲染进wangeditor组件，注意，不可以直接修改 defaultContent ，而是要异步渲染组件。可以使用 Vue3 ref 定义一个响应式变量 isEditorShow = false，在 请求结束时设置为 true

import { computed, ref, reactive } from 'vue'
 const defaultContent = ref([])
 const isEditorShow = ref(false)
 const getDefaultContent = computed(() => { 
     return cloneDeep(defaultContent.value)
   }
  )

  const getRichText = () => {
      YourApi().then(res => {
        defaultContent.value = res.data.protocolContent //拿到后端返回的数据
        isEditorShow.value = true
      })
    }

   <div v-if="isEditorShow" style="border: 1px solid #ccc">
          <Toolbar
            :editorId="editorId"
            :defaultConfig="toolbarConfig"
            :mode="mode"
            style="border-bottom: 1px solid #ccc"
          />
          <Editor
            :editorId="editorId"
            :defaultConfig="editorConfig"
            :defaultContent="getDefaultContent"
            :mode="mode"
            style="height: 500px"
          />
        </div>

注：后端返回的数据格式，应该和编写传输的格式一样通过以下代码获取(或者查看官方文档介绍 https://www.wangeditor.com/v5/guide/node-define.html#%E6%98%AF%E4%BB%80%E4%B9%88 

 import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'
   	const editor = getEditor(editorId)
    const children = editor.children

5、多个编辑器的使用

wangEditor 支持多个编辑器共存，正常创建即可

<div id="toolbar-container-1"></div>
<div id="editor-container-1"></div>

<hr>

<div id="toolbar-container-2"></div>
<div id="editor-container-2"></div>

// 创建编辑器1
const editor1 = createEditor({
  selector: '#editor-container-1',
  content: [],
  mode: 'default'
})
// 创建工具栏1
const toolbar1 = createToolbar({
  editor: editor1,
  selector: '#toolbar-container-1',
  mode: 'default'
})

// 创建编辑器2
const editor2 = createEditor({
  selector: '#editor-container-2',
  content: [],
  mode: 'simple'
})
// 创建工具栏2
const toolbar2 = createToolbar({
  editor: editor2,
  selector: '#toolbar-container-2',
  mode: 'simple'
})

或者采用组件引用的方式。编辑器的id一定不能相同

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
    components: { Editor, Toolbar },
    setup() {
        const editorId = 'editor' //【注意】编辑器 id ，要全局唯一
        const editorId2 = 'editor2'
        const defaultContent = ref([])
        const defaultSecretContent = ref([])
        const isEditorShow = ref(false)
        const isEditorSecretShow = ref(false)
        const getDefaultContent = computed(() => { 
          return cloneDeep(defaultContent.value)
         })
        const getDefaultSecretContent = computed(() => {
          return cloneDeep(defaultSecretContent.value)
         })
      }
}

<div v-if="isEditorShow" style="border: 1px solid #ccc">
          <Toolbar
            :editorId="editorId"
            :defaultConfig="toolbarConfig"
            :mode="mode"
            style="border-bottom: 1px solid #ccc"
          />
          <Editor
            :editorId="editorId"
            :defaultConfig="editorConfig"
            :defaultContent="getDefaultContent"
            :mode="mode"
            style="height: 500px"
          />
        </div>
<div v-if="isEditorSecretShow" style="border: 1px solid #ccc">
        <Toolbar
          :editorId="editorId2"
          :defaultConfig="toolbarConfig"
          :mode="mode"
          style="border-bottom: 1px solid #ccc"
        />
        <Editor
          :editorId="editorId2"
          :defaultConfig="editorConfig"
          :defaultContent="getDefaultSecretContent"
          :mode="mode"
          style="height: 500px"
        />
 </div>

上述的多个编辑器功能，使用的方法和一个编辑器的相同。

6、富文本中上传图片到oss，并显示

wangeditor支持自定义上传图片（远程服务器）

需要在editorConfig中通过customUpload方法上传。可见官方文档

https://www.wangeditor.com/v5/guide/menu-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83%BD

const customUpload = async (file, insertFn) => {
      const fileName = createNewFileName(file.name)
      const result = await ossUpload({ //此处为自行封装的oss上传方法
        type: 'image',
        fileName,
        file: file
      })
      insertFn(result.url)
   }

const editorConfig = {
     MENU_CONF: {
        uploadImage: {
          customUpload
        }
      }
    }