问题背景:
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底下
参考资料:https://www.jianshu.com/p/ce7783c8187d
本帖已被设为精华帖!