vue项目中富文本增加数学公式遇到的问题暨富文本的本地化

背景

项目为 vue2.X ，后台管理系统，新需求需要富文本支持数学公式。

原来的后台管理系统是 vue-admin 改造来的，原来自带的富文本版本为3.x的版本，且为cdn直接引入的。

从零开始

网上找到了 tinymce 的插件 kityformula-editor 可以实现数学公式的输入，但是在原来的版本上无法进行操作，一直无法显示。
后来百度得知tinymce 3.x 版本不支持数学公式，4之后的版本才支持数学公式（暂未确定）。

再加上原来的 tinymce 是通过 cdn 的方式引入，没有进行本地化，添加外部插件不方便，所以决定从零开始。

下载对应版本的npm包

vue 和 tinymce有一定的版本对应，版本不对的时候会有奇怪的报错。

vue2对应的tinymce版本的大版本号应该是5（我这里下载的是6，暂未发现问题）

tinymce-vue对应的版本大版本号是3

yarn add tinymce@^6
yarn add @tinymce/tinymce-vue@^3

创建组件

创建vue文件，写富文本组件。不过不用引入两个包，引入tinymce-vue就可以了。

<template>
  <div class="tinymce-container">
    <editor v-model="myValue" class="editor" :init="init" :disabled="disabled" />
  </div>
</template>

import Editor from '@tinymce/tinymce-vue';

// data数据
init: {
   
   
   language: 'zh_CN', // 汉化
   language_url: '/static/tinymce/langs/zh_CN.js', // 这里的地址指向 public 目录下的路径
}

页面中的使用

<Tinymce v-model="tinymceData" />

API key

此时页面会报错，内容如下：
A valid API key is required, starting 2024, to continue using TinyMCE. Please alert your admin sign-up to get your free API key

原因：我们只导入import Editor from '@tinymce/tinymce-vue'，那么tinymce会从云上调用组件，此刻若没api-key的话，会有错误提示

这里可以去官网获取一个免费的key，但是加上之后会有下一个错误，域名没有注册。

本地化

本地化包地址为：https://www.tiny.cloud/get-tiny/self-hosted/

上面问题的常用解决方式为本地化，下载本地的包之后，解压之后放在public的static文件夹下（原因是由于我们的后台项目只配置了/piblic/static/ 文件夹的服务化，可以支持域名加 /static 直接访问，放在其他位置，测试环境和正式环境会出现notFound或者404）。

并不需要将解压的文件全部放到这个文件夹下面，需要用到的也就是skins，用于css的调用。

此时不需要import引入，只需在init里面配置skin_url和 content_url即可。

其他的langs为语言包，plugins里面只需要放额外的插件即可，原本的tinymce包含的插件不需要放在这里。

还有就是 tinymce 需要impor