需求
(PC端)做一个可以使用图片上传、视频上传、文件上传功能的富文本组件,简单的文本编辑发布功能,采用socket方式传输,
做法
当时看到这个需求,我觉得是不难的,就去github上找富文本编辑器,因为项目比较急,当时我的想法是能找开箱即用的就找开箱即用的。
这几个编辑器都试了一次,最后经过筛选
Vue-Quill-Editor:不支持本地视频上传
vue-froala-wysiwyg:我想要的功能都有包括图片和视频上传,还额外支持响应式,但是是收费的
ueditor:功能很全,但是样式实在是很丑,可能要自己封装
剩下的编辑器基本上要么是功能不足或者是移动端的(优点是轻量)
因为没做过富文本的开发,所以当时我测试这些富文本就花了一个下午,后来仔细考虑了一下,最后使用了比较保守的方式,用了ueditor开发,顺便美化了一下。
引入ueditor
import '../../static/UEditor/ueditor.config'
import '../../static/UEditor/ueditor.all.min'
import '../../static/UEditor/lang/zh-cn/zh-cn'
我们要去ueditor.config.js文件里面去改一下路径配置
修改样式
引入ueditor之后,直接让工具栏隐藏起来,然后我们自己新