安装wangeditor

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

根目录创建env.d.ts

declare module '@wangeditor/editor-for-vue';

组件代码RichEditor.vue

<template><div><div style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="overflow-y: hidden;" v-bind:style="{ height: (props.rtname=='rteditor')?'250px':'200px' }"v-model="valueHtml":defaultConfig="editorConfig":mode="mode"@onCreated="handleCreated"@onChange="onEditorInput"/></div></div>
</template><script setup lang="ts">
import { ref, watch } from 'vue'
import { onMounted } from 'vue'
import { appDomain, cdnStorageDomain } from '@/assets/js/config'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor';const props = defineProps({data: { type: String },rtname: { type: String, default: 'rteditor' }
});const emit = defineEmits(['change']);
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('<p>hello</p>')
const mode = ref('default')onMounted(() => {valueHtml.value = props.data ?? ""
})watch(props, (newValue, oldValue) => {// console.log('值发生了变更', newValue, oldValue);valueHtml.value = props.data ?? ""
});const toolbarConfig = {excludeKeys: ['group-video', 'insertVideo', 'uploadVideo', 'emotion']
}
const editorConfig = { placeholder: '请输入内容...',MENU_CONF: {uploadImage: {//上传图片配置server: appDomain + '/admin/upload/image', //上传接口地址fieldName: 'file', //上传文件名methods: 'post',metaWithUrl: true, // 参数拼接到 url 上// 单个文件上传成功之后// onSuccess(file, res) {// },// 自定义插入图片customInsert(res:any, insertFn:any) {var result = res.resultvar path = cdnStorageDomain + '/' + result.fileinsertFn(path)},},}
}// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()
})const handleCreated = (editor:any) => {editorRef.value = editor // 记录 editor 实例，重要！/*//获取所有可使用的菜单keyconsole.log(editor.getAllMenuKeys())//显示当前菜单key，延迟后才能获取成功setTimeout(function(){const toolbar = DomEditor.getToolbar(editor)const curToolbarConfig = toolbar!.getConfig()console.log( curToolbarConfig.toolbarKeys ) // 当前菜单排序和分组}, 2000)*/
}const onEditorInput = () => {emit('change', {data: valueHtml.value});
}</script><style lang="less" scoped>
@import '../assets/style/css.less';
</style>

使用组件

<template><div><RichEditor :data="editorData" @change="handleRichEditorChange"/></div>
</template><script setup lang="ts">
import { ref } from 'vue'
import RichEditor from '@/components/RichEditor.vue'const editorData = ref("")const handleRichEditorChange = (res: { data: string }) => {editorData.value = res.data
}</script>