WangEditor富文本编辑器在Vue3中多实例基本应用

需求背景

一项任务中，可能需要多个成员配合完成时，在分配的同时根据任务中不同成员的技能熟练程度分配不同程度任务，任务描述中可能存在但不限于文字、图片、视频、影音等多媒体描述，需要采用富文本提交的方式。

工具

• vue
  版本信息: vue3
  安装方式: VUE官方文档
• wangEditor
  版本信息: wangEditor5
  安装方式: wangEditor官方文档

实例

<template>
    <div id=editor>
        <toolbar :mode="mode"
                 :editor="editor1"
                 :defaultCOnfig="toolbar_config"
        >
        </toolbar>
        <wangEditor @onCreated="onCreated1"
                :mode="mode"
                :defaultConfig="editor_conf"
                v-model="html1"
        >
        </wangEditor>
    <div>
    <div id=editor2>
        <toolbar :mode="mode"
                 :editor="editor2"
                 :defaultCOnfig="toolbar_config"
        >
        </toolbar>
        <wangEditor @onCreated="onCreated1"
                :mode="mode"
                :defaultConfig="editor_conf"
                v-model="html2"
        >
        </wangEditor>
    <div>
</template>

<script>
// 导入wangEditor, 可以参考官方文档

export default {
    data() {
        return {
            editor1: null, // 初始化实例
            editor2: null, // 初始化实例
            html1: '',
            html2: '',
            mode: 'default',
            toolbar_conf: {},
            editor_conf: {},
        }
    },
    
    method: {
        onCreated1(editor) {
            this.editor1 = Object.seal(editor);
        },
        
        onCreated2(editor) {
            editor.id = 'editor2';
            this.editor2 = Onject.seal(editor);
        }
    }
}
</scirpt>

ps：以上代码就是仅是参考