wangEditor富文本编辑器的配置以及一些坑

wangEditor中文文档：中文开发文档

以下是我在vue3+ts项目中的一些配置，其他项目与一些其他配置可以查看文档：

<template>
    <!-- 富文本编辑器工具栏 -->
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef"  
    :defaultConfig="toolbarConfig" :mode="mode" />
    <!-- 富文本编辑器输入框 -->
	<Editorstyle="height: 500px; overflow-y: hidden"v- 
    model="formData.detail":defaultConfig="editorConfig":mode="mode"
    @onCreated="handleCreated"/>
</template>

<script setup lang="ts">
    import '@wangeditor/editor/dist/css/style.css'; // 引入 css
    import { onBeforeUnmount, shallowRef, onMounted } from 'vue';
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

    const formData = ref({detail: '<p><br></p>'});

    // 富文本编辑器
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
// 内容 HTML
// const valueHtml = ref('');
// 工具栏栏配置
const toolbarConfig = {
	// 排除不需要的菜单
	excludeKeys: ['fullScreen', 'group-video'],
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
	const editor = editorRef.value;
	if (editor == null) return;
	editor.destroy();
});

const handleCreated = (editor: any) => {
	editorRef.value = editor; // 记录 editor 实例，重要！
};
// 编辑器配置
const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} };

editorConfig.MENU_CONF['uploadImage'] = {
    //url 上传图片的链接
	server: '/mockApi/upload/uploadFile',
	// form-data fieldName ，默认值 'wangeditor-uploaded-image'
	fieldName: 'file',
	// 单个文件的最大体积限制，默认为 2M
	maxFileSize: 10 * 1024 * 1024,
	// 最多可上传几个文件，默认为 100
	maxNumberOfFiles: 10,
	// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
	allowedFileTypes: ['image/*'],
	// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
	// meta: {
	// 	token: localStorage.getItem('vue-next-admin:token'),
	// },
	// 将 meta 拼接到 url 参数中，默认 false
	metaWithUrl: false,
	// 自定义增加 http  header
	headers: {
		// Accept: 'text/x-json',
		// 携带token
		Authorization: localStorage.getItem('vue-next-admin:token'),
	},
	// 跨域是否传递 cookie ，默认为 false
	withCredentials: true,
	// 超时时间，默认为 10 秒
	timeout: 10 * 1000,
	// 上传之前触发
	onBeforeUpload(file: File) {
		// file 选中的文件，格式如 { key: file }
		return file;
		// 可以 return
		// 1. return file 或者 new 一个 file ，接下来将上传
		// 2. return false ，不上传这个 file
	},
	// 上传进度的回调函数
	onProgress(progress: number) {
		// progress 是 0-100 的数字
		console.log('progress', progress);
	},
	// 单个文件上传成功之后
	onSuccess(file: File, res: any) {
		// console.log(`${file.name} 上传成功`, res);
		message('图片上传成功');
	},
	// 单个文件上传失败
	onFailed(file: File, res: any) {
		// console.log(`${file.name} 上传失败`, res);
		errorMessage(`图片上传失败，${res}`);
	},
	// 上传错误，或者触发 timeout 超时
	onError(file: File, err: any, res: any) {
		// console.log(`${file.name} 上传出错`, err, res);
		errorMessage(`图片上传出错，${err}，${res}`);
	},
	// 自定义插入图片的方法 上传成功后触发
	customInsert(res: any, insertFn: (url: string, alt?: string, href?: string) => void) {
		// res 即服务端的返回结果
		// console.log('res', res);
		// 插入图片的方法
		// 从 res 中找到 url alt href ，然后插入图片
		insertFn(res.data.link);
	},
</script>

上传图片的坑：在弹框的富文本编辑器中修改或上传图片后，弹框关闭，再次点击弹框，富文本获取上次数据显示时报错：Uncaught (in promise) Error: (annot find a descendant at path (0,3] in node: ["children":["type"."paragraph" "children".index.es.js:2379("text"."i1l,"operations"[("type""set seletion" "roperties":mull "newProperties":("anchor":("path":(0 3,0),"offset":0),"focus":("path"(6,3,0),"offset":0)H,"seletin":("anchor": ("path":[0,3,0),"offset":0),"focus":("path":[0,3,0,"offset":0)),"marks":null,"id":"wangeditor1" "isDetroved":false......

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'emitsOptions'at shouldUpdateComponent 

 监听了v-model绑定的值后发现，本来是能正确拿到数据的，但是在显示之前wangEditor将绑定到的值进行了一次重置，导致报错。

解决：让富文本组件随着弹框的关闭进行销毁，使用v-if

 因为我写的项目当中这个需求是新加的，所以绑定的值很可能为null，也有可能会出现这个报错。所以我对这个值进行了监听，如果为null的话给其赋一个默认值：