vue使用froala-editor富文本编辑器

Posted 2023-05-03

参考技术A 在项目需要用到富文本编辑器时，自己也筛选过不少插件，最终选择了froala-editor，UI简单功能强大，官网也列出了很多国外大佬在使用，自己实战后确实感觉比其他的富文本编辑器好。

官网： https://froala.com/

main.js 或者写在其他js文件再从main.js引入

1.新建froalaEditor.vue文件

2.自定义上传图片

3.小坑
该编辑器属于付费使用，不付费默认会带上他的标语，所以保存内容的时候要过滤

4.官网文档
https://froala.com/wysiwyg-editor/docs/framework-plugins/vue/#model

用了这个富文本编辑器后，感觉我很嫌弃以前用过的编辑器，哈哈，还有，我添加了自定义上传图片的案例，小伙伴们可以按照自己的实际情况来修改，上传视频的话也是如此。拜拜

——By kkc_hq

Vue + Element UI使用富文本编辑器

参考技术A 同时引入相关css

因为是个组件所以要注册才能使用

放到视图容器中

一切准备完成以后点击提交按钮就可以看见自己在富文本输入的内容啦~~

到这里就分享完咯，小伙伴们有更好用，更方便的富文本可以推荐一下呦~~