1. 导入所有组件
main.js
import 'froala-editor/css/froala_editor.pkgd.min.css'
import 'froala-editor/js/plugins.pkgd.min.js'
import VueFroala from 'vue-froala-wysiwyg'
Vue.use(VueFroala)
npm打包完后大约是1.84MB,非常大了。
2. 按需引入组件
main.js
// 编辑器基础样式和脚本
import 'froala-editor/js/froala_editor.min.js'
import 'froala-editor/css/froala_editor.min.css'
// 引入需要的组件
import 'froala-editor/js/plugins/align.min.js'
import 'froala-editor/js/plugins/code_beautifier.min.js'
import 'froala-editor/js/plugins/colors.min.js'
import 'froala-editor/css/plugins/colors.min.css'
...
import VueFroala from 'vue-froala-wysiwyg'
Vue.use(VueFroala)
实测按需引用后打包减少了约800KB的大小,非常nice。
每个Plugin对应的js和css路径可以参考官网的Plugins文档,如下图Plugin JS Script和Plugin CSS link的路径:
本文由 程序哩 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Nov 8, 2021 at 08:10 pm