Tinymce富文本图片上传oss功能

前言

富文本插件大家应该都比较熟悉，方便用户编辑文本，所见即所得，接手的时候富文本已经被前辈定了下来 《tinymce4.7.5》

业务需求《图片上传》

图片上传功能，图片上传富文本自带啊，不就是下面这种吗？

轻松的打开需求文档，瞄了一眼。。。。。。。。。。。。。

需要再插入图片前，自动上传链接到OSS，也就是富文本内必须是我们自己的图片地址？？？？

迅速打开Tinymce文档，我心凉了半截，这只有图片文件上传上传的回调方法。链接插入上传想都不要想。

怼需求？富文本编辑器不支持此功能？

看我如何暴打Tinymce，逼他上演一场宫廷大戏，做出不支持的功能，满足需求，走上。。。

启动雷达

找到皇宫，重点来了，核心思想，天黑请闭眼，狸猫换太子

新太子的挑选与检查

天亮请睁眼，尘埃落定

成功降生

销毁雷达

本文用另一种角度完成了，在富文本不支持的情况下，做出自己想要的功能。

本质还是用原生劫持DOM的方法，在图片插入前，完成了链接的获取，校验，上传，回填过程。

后记

本文主要讲解了实现功能的思路，具体实现有很多坑需要注意，比如两个按钮的控制，比如校验和回调，比如选项卡的切换，但此方法确实可行。