【笔记】vue-element-admin 的富文本编辑器插件 tinymce 更改为本地引入

问题背景：

vue-element-admin自带的富文本编辑器是tinymce，但并不是通过安装组件的形式安装到项目当中，而是通过异步加载 CDN 的引入方式，理由官方也进行了说明

但通过CDN的方式引入会存在一旦CDN的地址失效或链接不上，那编辑器就无法使用。例如vue-element-admin使用的CDN是国外的CDN，由于某些原因可能会导致国内链接不上，就会出现如下提示并且编辑器无法使用

解决方法：改为本地引入

1、下载本地化包到本地

本地化的包下载地址：https://www.tiny.cloud/get-tiny/self-hosted/。将下载后的整个tinymce目录copy到项目下，例如放在public目录，就是window.location.origin 所指向的目录

2、修改tinymce的引入地址

进入components目录下的tinymce组件，修改入口文件配置，位置在：/src/components/Tinymce/index.vue。

修改tinymce的引入地址，使其指向本地文件

const tinymceCDN = window.location.origin + '/tinymce/tinymce.min.js'

3、修改tinymce相关的组件引入地址

通过network可以看到tinymce除了加载tinymce.min.js之外，还会加载tinymce相关的js文件，而且依然是走CDN

所以在tinymce加载完成之后，将baseurl修改成本地地址

window.tinymce.baseURL = window.location.origin + '/tinymce'

4、下载本地化语言包

本地化的包里是没有语言包的，在https://www.tiny.cloud/get-tiny/language-packages/ 下载中文包，放到tinymce/langs底下