vue3中二次封装wangEditor富文本编辑器

前言

最近业务场景需要用到富文本编辑器，前后对比最后采用了wangEditor5。 对编辑器进行了组件封装，代码看起来更简洁优雅，在此记录一下整个过程。

基本使用

这里讲到的只是vue3的使用

安装

	yarn add @wangeditor/editor
    yarn add @wangeditor/editor-for-vue@next

使用

1. 新建WangEditor子组件 /compoments/WangEditor/index.vue

<template>
    <div style="border: 1px solid #ccc">
        <Toolbar
            style="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' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
interface Props {
    modelValue: string
    height?: 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)
    }
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

const mode = 'simple'
const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const { value } = editorRef
    if (value === null) return
    value.destroy()
})
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
</script>
<style lang="scss" scoped></style>

2. 父组件使用 /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。