编辑器封装

父组件

<script setup>
import { ref } from 'vue';
import Editor from './editor.vue';
//向子组件传递的富文本编辑器的初始内容
const html = ref("<p>dddddd</p>")
const submit = ()=>{
    console.log('html',html.value);
}
</script>
<template>
    <div class="rich-txt">
        <h3>富文本编辑器</h3>
        <Editor v-model:html="html"></Editor>
        <button @click="submit">提交</button>
    </div>
</template>
<style lang="scss" scoped></style>

 子组件

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted,computed } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const props = defineProps({
    html: String
})
const emit = defineEmits()
const mode = ref("simple")
// const mode = ref("default")
// 内容 HTML
const valueHtml = computed({
  get () {
    console.log(props.html);
    return props.html
  },
  set (value) {
    emit('update:html', value)
  }
})
// const toolbarConfig = {}
// 工具栏配置
const toolbarConfig = {
    toolbarKeys: [
        "headerSelect",  //正文
        "blockquote", //引号
        "|", //分隔线
        "bold",  //加粗
        "underline",  //下划线
    ]
}
// 初始化默认配置
const editorConfig = {
    placeholder: '请输入内容...',
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    console.log(editor.getConfig()["MENU_CONF"])
}
</script>
<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
        <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="handleCreated" />
    </div>
</template>