1、根本配置，官网教程
https://www.wangeditor.com/
2、封装组件
/** initValue: 父组件传递过去的富文本框初始值，这里会实时监听，更新初始值，搁置在弹窗中应用，没有钩子函数的更新。 getEditorContent() 办法，父组件通过这个办法获取富文本编辑器的内容，包含数组格局的和html格局的内容*/<template> <div v-html="valueHtml"></div> <div style="border: 1px solid #ccc"> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" /> <Editor style="min-height: 100px; overflow-y: hidden; text-align: left;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" @onChange="handleChange" /> </div></template><script setup>import '@wangeditor/editor/dist/css/style.css' // 引入 cssimport { onBeforeUnmount, ref, shallowRef, onMounted, nextTick, watch } from 'vue'import { Editor, Toolbar } from '@wangeditor/editor-for-vue'import axios from 'axios'// 初始值const props = defineProps({ initValue: String})const emits = defineEmits(['getEditorContent'])// const emits = defineEmits([''])let mode = ref('default')// 编辑器实例，必须用 shallowRefconst editorRef = shallowRef()// 内容 HTMLconst valueHtml = ref('')// 模仿 ajax 异步获取内容onMounted(() => { nextTick(() => { // 界面节点更新完当前再批改值。 valueHtml.value = props.initValue })})// 工具栏配置const toolbarConfig = { toolbarKeys: [ // 菜单 key 'headerSelect', 'bold', // 加粗 'italic', // 斜体 'through', // 删除线 'underline', // 下划线 'bulletedList', // 无序列表 'numberedList', // 有序列表 'color', // 文字色彩 'insertLink', // 插入链接 'fontSize', // 字体大小 'lineHeight', // 行高 'uploadImage', // 上传图片 'delIndent', // 缩进 'indent', // 增进 'deleteImage',//删除图片 'divider', // 分割线 'insertTable', // 插入表格 'justifyCenter', // 居中对齐 'justifyJustify', // 两端对齐 'justifyLeft', // 左对齐 'justifyRight', // 右对齐 'undo', // 撤销 'redo', // 重做 'clearStyle', // 革除格局 'fullScreen' // 全屏 ]}const editorConfig = { placeholder: '请输出内容...', // 配置默认提醒 // readOnly: true, MENU_CONF: { // 配置上传服务器地址 uploadImage: { // 小于该值就插入 base64 格局（而不上传），默认为 0 base64LimitSize: 5 * 1024, // 5kb // 单个文件的最大体积限度，默认为 2M // maxFileSize: 1 * 1024 * 1024, // 1M // // 最多可上传几个文件，默认为 100 // maxNumberOfFiles: 5, // 抉择文件时的类型限度，默认为 ['image/*'] 。如不想限度，则设置为 [] allowedFileTypes: ['image/*'], // 自定义上传 async customUpload(file, insertFn) { // 文件上传 const formData = new FormData(); formData.set('file', file) // 这里依据本人我的项目封装状况，设置上传地址 axios.defaults.headers.common['Authorization'] = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjVhYzc3MDQxLTE3NGItNDEwZC1hOTJlLTVkYzU0YmRhMjllNiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.GhdthjLmw4NP2WV2owYQS70tacRM-pX7NqI7Mo0_j_hatiqtSrqAr0RJC40osRETiQo_dacZcvNqATLsJHL77A' let result = await axios.post('https://zxc.test.cn/file/upload', formData) // 插入到富文本编辑器中，主见这里的三个参数都是必填的，要不然控制台报错：typeError: Cannot read properties of undefined (reading 'replace') insertFn(result.data.data.url, result.data.data.name, result.data.data.name) } } }}// 组件销毁时，也及时销毁编辑器onBeforeUnmount(() => { const editor = editorRef.value if (editor == null) return editor.destroy()})const handleCreated = (editor) => { editorRef.value = editor // 创立富文本编辑器}const handleChange = (info) => { // info.children 数组蕴含了数据类型和内容，valueHtml.value内容的html格局 emits('getEditorContent', info.children, valueHtml.value)}watch(()=>props.initValue, (value) => { // 父组件获取初始值 valueHtml.value = value})</script>3、应用
父组件<wang-editor :initValue="form.baseInfo.descInfo" @getEditorContent="onEditorChange"></wang-editor>import WangEditor from '@/components/WangEditor'const onEditorChange = (arr, html) => { console.log(arr, html)}