最近在用vue開發項目,使用Tinymce作爲富文本編輯器,最開始用的時候,還是不錯的。但是用了一年發現一個問題,就是這個編輯器加載的太慢了,有時候網速慢一點,可能就直接加載不出來。
下面是我親測的解決方法:
首先說原因:加載 tinymce.min.js 加載不出來,以及這個js所需要加載的文件,加載不出來。
具體代碼:
const tinymceCDN = 'https://cdn.jsdelivr.net/npm/[email protected]/tinymce.min.js'
還有的加載的JS是這個:
<script src="//unpkg.com/[email protected]/tinymce.min.js"></script>
由於unpkg.com(外網)被攔截,導致 tinymce.min.js 不能加載。
通過查看:cdn.jsdelivr.net網站,此網站爲國外網站,而且不穩定,有時候通過Ping也不通,所以就會存在加載慢的問題。
可以看一下加載的東西:
首先是需要加載 tinymce.min.js,然後該JS會加載對應的文件:
原因找到了,解決方法也就很多了。
第一種解決方法:將這些文件下載下來作爲本地資源進行加載:目錄結構如下
將這些資源下載後,放到我們自己的服務器進行加載即可,如果需要該資源的童鞋,可以找我要。
第二種解決辦法:更爲快捷的方式,用國內的資源即可:
推薦幾個國內的CDN網站,可以在上面找靜態資源:
1、七牛:https://www.staticfile.org
2、360:https://cdn.baomitu.com
3、字節跳動:https://cdn.bytedance.com
七牛CDN:只有6.3.1這一個版本,不建議使用。
字節跳動CDN:版本相對也比較豐富。
360CDN:相對版本較多,可以採用:
我的版本是:4.9.2,採用360的CDN:http://lib.baomitu.com/tinymce/4.9.2/tinymce.min.js
<script src="http://lib.baomitu.com/tinymce/4.9.2/tinymce.min.js"></script>
替換項目裏面的tinymce.min.js 地址即可。
控制檯加載正常,問題已解決:
打完收工!