前言
最近业务场景需要用到富文本编辑器，前后对比最后采用了wangEditor5。 对编辑器进行了组件封装，代码看起来更简洁优雅，在此记录一下整个过程。
基本使用
这里讲到的只是vue3的使用
安装
yarn add @wangeditor/editoryarn add @wangeditor/editor-for-vue@next
使用
新建WangEditor子组件/compoments/WangEditor/index.vue
<template><div style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":defaultConfig="toolbarConfig":mode="mode" /><Editor:style="{ height: height + 'px', 'overflow-y': 'hidden' }"v-model="valueHtml":defaultConfig="editorConfig":mode="mode"@onCreated="handleCreated" /></div></template><script lang="ts" setup>import '@wangeditor/editor/dist/css/style.css' // 引入 cssimport {Editor, Toolbar } from '@wangeditor/editor-for-vue'interface Props {modelValue: stringheight?: number | string // 编辑器的高度}interface EmitEvent {(e: 'update:modelValue', params: string): void}const props = withDefaults(defineProps<Props>(), {height: 300})const emit = defineEmits<EmitEvent>()const valueHtml = computed({get() {return props.modelValue},set(value: string) {emit('update:modelValue', value)}})// 编辑器实例，必须用 shallowRefconst editorRef = shallowRef()const mode = 'simple'const toolbarConfig = {}const editorConfig = {placeholder: '请输入内容...' }// 组件销毁时，也及时销毁编辑器onBeforeUnmount(() => {const {value } = editorRefif (value === null) returnvalue.destroy()})const handleCreated = (editor: any) => {editorRef.value = editor // 记录 editor 实例，重要！}</script><style lang="scss" scoped></style>
父组件使用
/views/pageName/index.vue
<template><div class="p20"><WangEditor v-model="htmlStr" /><br /><hr /><p>输入的结果：</p>{{ htmlStr }}</div></template><script lang="ts" setup>const htmlStr = ref('<p>wangEditor二次封装</p>')</script><style lang="scss" scoped></style>
页面效果
其他
此处只记录了基本使用，更多自定义配置请参考官网。
如有需要，移步 ----> wangEditor5
Tips
编辑器最好指定高度，不然控制台会有黄色的警告， 本组件已经设置height默认300。
