前言
最近业务场景需要用到富文本编辑器,前后对比最后采用了wangEditor5。 对编辑器进行了组件封装,代码看起来更简洁优雅,在此记录一下整个过程。
基本使用
这里讲到的只是vue3的使用
安装
yarn add @wangeditor/editor
yarn add @wangeditor/editor-for-vue@next
使用
- 新建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>
- 父组件使用
/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。