先引入wangeditor
yarn add @wangeditor/editor-for-vue@next
子组件
<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'
import { onBeforeUnmount, computed, shallowRef, ref } from 'vue'
// interface EmitEvent {
// (e: 'update:modelValue', params: string): void
// }
const props = defineProps({
height:{
type:Number,
default:320
},
modelValue:{
type:String,
default:''
},
})
const emit = defineEmits()
const valueHtml = computed({
get() {
return props.modelValue
},
set(value: string) {
console.log("value",value)
//子组件传值给父组件
emit('update:modelValue', value)
}
})
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef()
const toolbarConfig = {}
const editorConfig = {
placeholder: '请输入内容...',
MENU_CONF: {},
}
// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {
const { value } = editorRef
if (value === null) return
value.destroy()
})
const handleCreated = (editor: any) => {
editorRef.value = editor // 记录 editor 实例,重要!
}
</script>
<style lang="scss" scoped></style>
父组件
<Editor v-model="form.noticeContent"></Editor>