好资源导航 » 文章资讯 » vue-froala-wysiwyg 富文本编辑器功能

vue-froala-wysiwyg 富文本编辑器功能

2023-08-13 23:43:03 62

近期需要在vue3项目上做一个富文本编辑器，找了很多插件组件，最终决定用froala。虽然不是免费的，但是功能实在是太强大了。

froala文档：https://www.froala.com/wysiwyg-editor/docs/overview

froala官方demo：https://www.froala.com/wysiwyg-editor/examples

下面介绍在vue3.中如何安装使用froala。

Step1：

froala依赖于jQuery。所以要安装jQuery；

yarnaddjquery

或者

npminstalljquery--save

froala依赖于babel-runtime。所以也要安装。

yarnaddbabel-runtime@6.26.0

或者

npminstallbabel-runtime@6.26.0

Step2：

在main.js里引入jQuery。

importjqueryfrom'jquery'
window.jquery=window.$=jquery

在main.js里引入froala相关的文件并且进行相应的配置。

require('froala-editor/js/froala_editor.pkgd.min')
require('froala-editor/css/froala_editor.pkgd.min.css')
require('font-awesome/css/font-awesome.css')
require('froala-editor/css/froala_style.min.css')

importVueFroalafrom'vue-froala-wysiwyg'
Vue.use(VueFroala)

Step3:

这个时候就可以使用froala这个组件啦~。

在某个.vue文件中：

其他相关的config配置和事件操作可以查看文档。

总结

以上所述是小编给大家介绍的vue-froala-wysiwyg富文本编辑器功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

返回顶部
514930285
czq8825@qq.com

vue-froala-wysiwyg 富文本编辑器功能

热门推荐

随机推荐