一直想要一个神奇多功能的富文本编辑器，经同事介绍这个 WangEditor 富文本编辑器，发现挺好用的。
传送门：wangEditor
于是用Vue2.X语法自行封装一下，这样在复用组件时，可以少写一些代码，直接组件引用即可。另外，Vue3.X项目也可直接使用，因为Vue3.X是兼容Vue2.X语法的。
注意：如果反复创建与销毁该组件，记得用上v-if
导入依赖包，注意Vue2.X和Vue3.X项目导入的依赖包版本会有所不同
// 查看 @wangeditor/editor 版本列表npm view @wangeditor/editor versions --json// 导入 @wangeditor/editor 依赖包npm i --save @wangeditor/editor@5.1.15// 查看 @wangeditor/editor-for-vue 版本列表npm view @wangeditor/editor-for-vue versions --json// 导入 @wangeditor/editor-for-vue 依赖包npm i --save @wangeditor/editor-for-vue@5.1.12父组件：index.vue
完成 import WangEditor from './components/wangEditor'export default { components: {WangEditor }, data: () => ({// editorParams1 必填非空的富文本参数editorParams1: { content: '', // 富文本内容 placeholder: '请填写内容', // 富文本占位内容 uploadImageUrl: 'http://IP:Port/api/uploadFileAction', // 富文本上传图片的地址 height: '300px', // 富文本最小高度 isDisabled: false // 富文本是否禁用},// editorParams2 必填非空的富文本参数editorParams2: { content: 'HelloWorld!', // 富文本内容 placeholder: '请填写内容', // 富文本占位内容 uploadImageUrl: 'http://IP:Port/api/uploadFileAction', // 富文本上传图片的地址 height: '300px', // 富文本最小高度 isDisabled: true // 富文本是否禁用} }), methods: {/** * 获取富文本内容 */async handleSubmitClick () { let refs = await this.$refs let wangEditorRef1 = refs.wangEditorRef1 if (wangEditorRef1 != null) {console.log(wangEditorRef1.getEditorHtml())console.log(wangEditorRef1.getEditorText()) } let wangEditorRef2 = refs.wangEditorRef2 if (wangEditorRef2 != null) {console.log(wangEditorRef2.getEditorHtml())console.log(wangEditorRef2.getEditorText()) }} }}子组件：wangEditor.vue
import {Editor, Toolbar } from '@wangeditor/editor-for-vue'export default { name: 'wangEditor', components: {Editor, Toolbar }, props: ['editorParams' ], data () {return { editor: null, // 富文本编辑器对象 content: null, // 富文本内容 placeholder: null, // 富文本占位内容 uploadImageUrl: null, // 富文本上传图片的地址 height: '300px', // 富文本最小高度 isDisabled: false, // 富文本是否禁用 // 工具栏配置 toolbarConfig: {// toolbarKeys: [], // 显示指定的菜单项// excludeKeys: [], // 隐藏指定的菜单项 }, // 编辑器配置 editorConfig: {placeholder: '请输入内容......',MENU_CONF: ['uploadImage'] }} }, watch: {/** * 深度监听富文本参数 */'editorParams': { handler: function (newVal, oldVal) {if (newVal != null) { this.content = newVal.content this.editorConfig.placeholder = this.placeholder this.uploadImageUrl = newVal.uploadImageUrl this.setUploadImageConfig() this.height = newVal.height this.isDisabled = newVal.isDisabled} }, immediate: true, deep: true} }, methods: {/** * 实例化富文本编辑器 * 文档