Ckeditor 编辑器上传WPS图片失败问题

Ckeditor 编辑器

久经考验的企业级的所见即所得HTML编辑器，具有广泛的浏览器兼容性。因其开源免费的特性和丰富的插件而受到开源世界的喜爱。
也被某些公司用于商业开发，比如这次的让我绕了好久的某OA……
官方网站

BUG复现

使用官方PasteFromWord的插件后，从office中粘贴含图片的文章正常上传，从WPS中粘贴含图片的文章，则图片只会显示在本地临时文件下，并没有上传成功

BUG定位

跟踪编辑器逻辑后发现，粘贴单张图片走的是uploadImage的逻辑，此时可以直接获取到图片对象，而图文混合后，则无法直接获取图片对象。
编辑器的处理方式是将word文件转换成RTF富文本格式，再将图片转成base64格式。拿到base64格式之后自然能成功上传。
到这一步的逻辑依旧没问题，所以office文档是正常的，但插件作者显然没有考虑到中国的WPS软件，于是WPS上传失败。
聪明的小伙伴应该已经意识到了，这就是WPS转RTF和office转RTF不一致导致的。
抽取图片的逻辑为，原插件的为/\{\\pict[\s\S]+?\\bliptag\-?\d+(\\blipupi\-?\d+)?(\{\\\*\\blipuid\s?[\da-fA-F]+)?[\s\}]*?/,*/
而WPS的RTF格式并无bliptag和blipupi并不存在，于是解析错误，bug产生。

BUG解决

知道原因就好改了，将RTF匹配的正则语句，简单重写一下即可.我们的目标是拿到pict开头的所有包含{\*\blipuid[16进制数]}的对象
故将PasteFromWord插件下的filter文件中CKEDITOR.plugins.pastefromword.images下的正则表达式改为如下

rePictureHeader = /\{\\pict[\s\S]+?(\{\\\*\\blipuid\s?[\da-fA-F]+\})+?/,

重启编辑器，查看效果即可。

结语

编辑器是之前未曾接触过的类型，所以花了许多时间在逻辑追踪和RTF格式学习上。图片有拖拽上传、粘贴上传、图文粘贴上传、图片浏览器上传，图文格式还需要转RTF进行base64的处理也算是全新的知识点了。