基于TinyMCE封装一个富文本组件

使用TinyMCE的原因是因为WangEditor无法支持移动端的适配

<template>
    <div class="tinymce-editor-container" v-loading="tinymceLoading" v-cloak>
        <editor v-model="myValue" :init="init" :disabled="disabled" :id="tinymceId"></editor>
    </div>
</template>


<script setup lang="ts">
//JS部分
//在js中引入所需的主题和组件
import tinymce from 'tinymce/tinymce'
import 'tinymce/skins/content/default/content.css'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default'; //引入编辑器图标icon，不引入则不显示对应图标
import 'tinymce/models/dom' // 这里是个坑 一定要引入


//在TinyMce.vue中接着引入相关插件
import "tinymce/icons/default/icons"
// import "tinymce/plugins/image" // 插入上传图片插件
// import "tinymce/plugins/media" // 插入视频插件
import "tinymce/plugins/table" // 插入表格插件
import "tinymce/plugins/lists" // 列表插件
import "tinymce/plugins/wordcount" // 字数统计插件
import "tinymce/plugins/code" // 源码
import "tinymce/plugins/fullscreen" //全屏

import "tinymce/plugins/link" //全屏
import "tinymce/plugins/image" //全屏
import "tinymce/plugins/anchor" //全屏
import "tinymce/plugins/charmap" //全屏
import "tinymce/plugins/media" //全屏
// import "tinymce/plugins/emoticons" //全屏
import "tinymce/plugins/pagebreak" //全屏
import "tinymce/plugins/insertdatetime" //全屏
import "tinymce/plugins/preview" //全屏
import "tinymce/plugins/searchreplace" //全屏
import "tinymce/plugins/advlist" //全屏
import "tinymce/plugins/help" //全屏
// import "tinymce/plugins/export" //全屏
// import "tinymce/plugins/example" //全屏

//接下来定义编辑器所需要的插件数据
import { reactive, r