wangeditor5在vue3中的全使用过程（图片上传、附件上传、工具栏配置、编辑器配置）

1、参考官方的wangeditor5-for-vue3的开发手册

官方文档地址：https://clinfc.github.io/wangeditor5-for-vue3/guide/

说明为说明要编写这编博客文章？

官方文档的使用手册对于新手来说比较的难看懂，写的也不够详细，源码的封装比较深。写博客的目的是为了详细讲解一个适合项目使用的wangeditor的基本全过程，适合直接复制使用和修改（原官方文档使用原生js编写）

2、下载编辑器的依赖

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save

# 下面是vue3单独的组件，上面两个是旧的

npm install @wangeditor/editor wangeditor5-for-vue3

21.、新旧组件对比

下面的组件只是作为一个对比，不详细讲

旧组件

根据看与编辑器分开封装组件

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

新组件

WeEditor 组件将 WeToolbar 和 WeEditable 组件封装在了一个组件中，使用更方便。

<template>
  <we-editor
    toolbar-class="toolbar"
    editable-class="editable"
    toolbar-style="border: 1px solid #d9d9d9"
    editable-style="border: 1px solid #d9d9d9"
    :toolbar-option="toolbar"
    :editable-option="editable"
    :toolbar-reloadbefore="onToolbarReloadBefore"
    :editable-reloadbefore="onEditableReloadBefore"
    v-model="formData.jarr"
    v-model:json="formData.jstr"
    v-model:html="formData.html"
  />
</template>

3、入门使用<we-editor>组件

创建一个新的vue页面来编写当前demo

3.1、使用上面的新组件

3.2、编写js代码

<script>
// 引入 wangeditor5 样式
import '@wangeditor/editor/dist/css/style.css'

import {
    WeEditor, useWangEditor } from 'wangeditor5-for-vue3'
import {
    defineComponent, shallowReactive } from 'vue'
export default defineComponent( {
   
	name: "wangeditor",
	components: {
    WeEditor },
	setup() {
   
		// 编辑器配置
		const editableOption = {
   }

		// 菜单栏配置
		const toolbarOption = {
   }

		// 防抖时长。当会触发重载的配置项发生变化 365ms 后，编辑器会重载
		const reloadDelary = 365

		// 对于上面的三个对象，经过 useWangEditor 处理后，返回的 editable 和 toolbar 分别对应编辑器和菜单栏的配置项
		const {
    editable, toolbar } = useWangEditor(
			editableOption,
			toolbarOption,
			reloadDelary
		)

		// 开启只读模式【不可编辑】
		editable.config.readOnly = false

		// 不要使用 reactive/ref，应该使用 shallowReactive/shallowRef 来接收 json array 数据
		const formData = shallowReactive({
    jarr: [], jstr: '', html: '' })

		// 在可编辑的重新加载之前
		function onEditableReloadBefore(inst) {
   
			console.log(inst)
			console.log('editable 即将重载: ' + new Date().toLocaleString())
		}

		// 在工具栏上重新加载之前
		function onToolbarReloadBefore(inst) {
   
			console.log(inst)
			console.log('toolbar 即将重载: ' + new Date().toLocaleString())
		}

		return {
    editable, toolbar, formData, onEditableReloadBefore, onToolbarReloadBefore }
	},
})
</script>

useWangEditor的官方说明

经过 useWangEditor 处理后，返回的 editable 和 toolbar 分别对应编辑器和菜单栏的配置项，不过此时的配置项对象具备了响应式特性，我们可以直接修改 editable/toolbar 对应属性来更新或重载编辑器。

如果传入的 editableOption 和 toolbarOption 是响应式数据，内部将自动解除与之前的关联，也就意味着经过 useWangEditor 处理后得到的 editable 和 toolbar 配置对象，即使内容发生变化也不会触发之前的依赖更新！！！

大白话：可以在useWangEditor之后的对象中编写，也可以直接在editableOption对象中编写好再进过useWangEditor处理，不建议各自写一点，因为会覆盖，要么在前面写要么在后面写

3.3、编写样式

原来组件上面通过 toolbar-style="border: 1px solid #d9d9d9"editable-style="border: 1px solid #d9d9d9"来指定了工具栏和编辑器的样式边框，通过查看DOM元素赋值如下

<style>
/*工具栏样式*/
.toolbar{
   
	border: 1px solid #d9d9d9;margin-bottom: 10px;
}
/*工具栏剧中显示*/
.w-e-toolbar {
   
	justify-content: center !important;
}
/*编辑器样式*/
.editable{
   
	border: 1px solid #d9d9d9;
	min-height: 800px;
	width: 850px;
	margin: 30px auto 150px auto;
	background-color: #fff;
	box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
	border: 1px solid #e8e8e8;
}
</style>

初始化效果

4、工具栏的修改（toolbarOption）

关于工具栏的排序以及菜单的配置的获取，根据官网的语句通过vue方法获取我暂时没弄懂，所以通过原生的方式获取

4.1、获取工具栏默认配置

进入官方提供的Demo示例，按F12输入如下命令查看工具栏的默认配置

toolbar.