后台-wangEditor用法

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

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css' // 引入 css

// 编辑器实例，必须用 shallowRef
	const editorRef = shallowRef()

	const mode = 'default'
	// 内容 HTML
	const valueHtml = ref('')


	const handleCreated = (editor: any) => {
		editorRef.value = editor // 记录 editor 实例，重要！
		nextTick(() => {
			const toolbar = DomEditor.getToolbar(editor)
			console.log(toolbar?.getConfig().toolbarKeys)   //获取工具栏的配置
		})
	}



	// 清除全屏功能
	const toolbarConfig = {} as any
	toolbarConfig.excludeKeys = [
		'fullScreen', // 排除菜单组，写菜单组 key 的值即可
	]
	let editorConfig = {
		MENU_CONF: {
			uploadImage: {},
		},
		placeholder: '请输入内容...',
	}



// 上传图片
	type InsertFnType = (url: string, alt: string, href: string) => void
	editorConfig.MENU_CONF['uploadImage'] = {
		async customUpload(file: File, insertFn: InsertFnType) {
			let reqData = {
				name: file.name,
				raw: file,
			}
			upload(reqData)
				.then((res: any) => {
					insertFn(res.data.url, '', '')
				})
				.catch((err) => {
					console.error(err)
				})
		},
	}

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