Quill富文本编辑器黏贴上传编辑图片

551 阅读2分钟

最近接手了一个历史功能模块,使用的是富文本编辑器Quill。要求实现类似于知乎图片上传的功能,踩了很多坑,在这里记录下。

另外想吐槽的是,接手的项目用的是Quill的2.0.0-dev.3版本,本身就有很多问题。而且这个项目好像也已经停止维护了,虽然看着star很多,实际使用的时候真是一地鸡毛,前端领域的富文本,懂得都懂~

下面开始,具体功能类似这样,包括上传后可以通过icon删除,可以切换布局方式,可以添加备注。

1669126709637.png

需求分析及实现

插入图片后需要展示固定的样式和布局,同时有按钮可以实现额外的功能,这里是基于blot来实现,具体是新建一个blot类,通过create方法生成结构,使用DOM0级时间onclick来实现交互。 类的实现参考github.com/quilljs/par…

此外编辑备注时需要做一些额外的处理,比如区分时删除备注还是删除节点,备注超出限制或者删完了的处理等。需要说明的是这里的处理也是不太对的,但是我不清楚该怎么做合适,这里只是记录下。

1669128232297.png

黏贴图片上传到oss的处理

黏贴图片默认会将图片处理成base64。需要在初始化配置模块的地方,使用新的方法来覆盖默认的方法。

首先是把默认的base64处理方式拿出来做成占位的形式,通过添加传参来控制blot的行为,比如我这边是判断如果有file传参,那就认为是要传到oss的,会添加额外的类名实现loading效果,上传完成后再更改样式。

1669128494432.png

1669128671541.png

参考资料:

github.com/quilljs/par…

www.kancloud.cn/liuwave/qui…

juejin.cn/post/684490…