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

vue tytrock ⋅ 于 2022-05-18 18:23:13 ⋅ 234 阅读

问题背景:

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

image.png

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

image.png


解决方法:改为本地引入

1、下载本地化包到本地

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

image.png


2、修改tinymce的引入地址

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

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

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

image.png


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

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

image.png

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

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

image.png


4、下载本地化语言包

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

image.png


参考资料:https://www.jianshu.com/p/ce7783c8187d


本帖已被设为精华帖!
回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter