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