如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能

<h2>相关文档</h2>
<p>本文部分内容借鉴： <a href="https://www.cnblogs.com/zhongchao666/p/11142537.html" rel="external nofollow" target="_blank">https://www.cnblogs.com/zhongchao666/p/11142537.html</a></p>
<p>tinymce中文文档： <a href="http://tinymce.ax-z.cn/" rel="external nofollow" target="_blank">http://tinymce.ax-z.cn/</a></p>
<h2>安装tinymce</h2>
<p>1、安装相关依赖</p>
<div class="blockcode">
<pre class="brush:js;">
yarn add tinymce  ||  npm install tinymce -S

yarn add @tinymce/tinymce-vue  ||  npm install @tinymce/tinymce-vue -S</pre>
</div>
<p>2、汉化编辑器前往此地址下载中文汉化包： <a href="https://www.tiny.cloud/get-tiny/language-packages/" rel="external nofollow" target="_blank">https://www.tiny.cloud/get-tiny/language-packages/</a><br>
</p>
<p style="text-align: center"><img alt="" loading="lazy" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-e3eff0818aa739a799027accba280922.png"></p>
<p>在项目public文件夹下新建tinymce文件夹，将下载后的压缩包解压至此文件夹另将node_modules/tinymce/skins文件夹也复制到public/tinymce里<br>
</p>
<p style="text-align: center"><img alt="" loading="lazy" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-13730c68007259cbda2f24826bc8270b.png"></p>
<p>3、封装组件:在src/components下新建TEditor.vue，并写入以下代码</p>
<div class="blockcode">
<pre class="brush:js;">
<template>
<div class="tinymce-box">
  <Editor v-model="contentValue" :init="init" :disabled="disabled" @onClick="onClick" />
</div>
</template>

<script>
import api from '../api/api.js'

//引入tinymce编辑器
import Editor from '@tinymce/tinymce-vue'

//引入node_modules里的tinymce相关文件文件
import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入则不显示编辑器
import 'tinymce/themes/silver'  //编辑器主题，不引入则报错
import 'tinymce/icons/default'  //引入编辑器图标icon，不引入则不显示对应图标

// 引入编辑器插件（基本免费插件都在这儿了）
import 'tinymce/plugins/advlist'  //高级列表
import 'tinymce/plugins/anchor'  //锚点
import 'tinymce/plugins/autolink'  //自动链接
import 'tinymce/plugins/autoresize'  //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import 'tinymce/plugins/autosave'  //自动存稿
import 'tinymce/plugins/charmap'  //特殊字符
import 'tinymce/plugins/code'  //编辑源码
import 'tinymce/plugins/codesample'  //代码示例
import 'tinymce/plugins/directionality'  //文字方向
import 'tinymce/plugins/emoticons'  //表情
import 'tinymce/plugins/fullpage'  //文档属性
import 'tinymce/plugins/fullscreen'  //全屏
import 'tinymce/plugins/help'  //帮助
import 'tinymce/plugins/hr'  //水平分割线
import 'tinymce/plugins/image'  //插入编辑图片
import 'tinymce/plugins/importcss'  //引入css
import 'tinymce/plugins/insertdatetime'  //插入日期时间
import 'tinymce/plugins/link'  //超链接
import 'tinymce/plugins/lists' //列表插件
import 'tinymce/plugins/media' //插入编辑媒体
import 'tinymce/plugins/nonbreaking' //插入不间断空格
import 'tinymce/plugins/pagebreak' //插入分页符
import 'tinymce/plugins/paste' //粘贴插件
import 'tinymce/plugins/preview'//预览
import 'tinymce/plugins/print'//打印
import 'tinymce/plugins/quickbars'  //快速工具栏
import 'tinymce/plugins/save'  //保存
import 'tinymce/plugins/searchreplace'  //查找替换
// import 'tinymce/plugins/spellchecker'  //拼写检查，暂未加入汉化，不建议使用
import 'tinymce/plugins/tabfocus'  //切入切出，按tab键切出编辑器，切入页面其他输入框中
import 'tinymce/plugins/table'  //表格
import 'tinymce/plugins/template'  //内容模板
import 'tinymce/plugins/textcolor'  //文字颜色
import 'tinymce/plugins/textpattern'  //快速排版
import 'tinymce/plugins/toc'  //目录生成器
import 'tinymce/plugins/visualblocks'  //显示元素范围
import 'tinymce/plugins/visualchars'  //显示不可见字符
import 'tinymce/plugins/wordcount'  //字数统计

export default {
   name: 'TEditor',
   components: {
         Editor
   },
   props: {
         value: {
               type: String,
               default: ''
         },
         disabled: {
               type: Boolean,
               default: false
         },
         plugins: {
               type: [String, Array],
               default: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave '
         },
         toolbar: {
               type: [String, Array],
               default: 'fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
            styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
            table image media charmap hr pagebreak insertdatet