tinymce比较好用,自定义一些功能也很方便。使用中发现加载总是不是那么迅速,一开始以为性能就是这样的,通过加载记录发现tinymce中的js组件居然都是加载tinymce官网的资源,一直在访问外网能不慢么。
就想tinymce-vue是vue组件呀,都install进来了,怎么还在走外网呢?打开tinymce-vue包发现实际上就是个script加载器,使用tinymce-vue后,实际上不需要install tinymce也能运行,他会判断本地是否有tinymce环境,没有的话,就直接创建script标签加载网页版本的js文件,再使用普通网页的方式初始化tinymce组件。
方式A:解决方式是把tinymce-vue中scriptloader复制到本地再改下js路径,把tinymce资源放到自己的服务器,这样就快多了。不再需要api-key。仿照tinymce-vue的写法,如:
//ScriptLoader_1需要到tinymce-vue中找,
ScriptLoader_1.ScriptLoader.load(document,'//a.com(自己的服务器)/tinymce.min.js',function () {
that.tinymce=tinymce
that.editor=that.tinymce.init(that.tinymceConfig)
const formatpainter= import('tinymce-plugin-formatpainter')
})
方式B:增加资源路径,把部分资源放在自己的服务器,无需修改代码,易燃依赖tinymce-vue和需要api-key,能提高一点速度,但不彻底,如:
<Editor
api-key="no-api-key"
:init="{
plugins: 'lists link image table code help wordcount',
skin_url: '/node_modules/tinymce/skins/ui/oxide',
theme_url:'/node_modules/tinymce/themes/silver/theme',
icons_url:'/node_modules/tinymce/icons/default/icons.js',
model_url:'/node_modules/tinymce/models/dom/model.min.js',
}"
/>