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


    Ckeditor 编辑器

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

    BUG复现

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

    BUG定位

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

    BUG解决

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

    rePictureHeader = /{\pict[sS]+?({\*\blipuids?[da-fA-F]+})+?/,
    

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

    结语

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

  • 相关阅读:
    【Mybatis源码解析】Mybatis的日志系统
    20200728
    【Mybatis源码解析】-Configuration
    【日志】怎么打印日志
    【OOM】几种常见的OOM异常
    树 [虚树, 动态规划]
    最大公约数 [动态规划]
    送分题 [组合计数]
    LCM [树状数组, HH的项链]
    AT1219 歴史の研究 [回滚莫队]
  • 原文地址:https://www.cnblogs.com/hyry/p/13847606.html
Copyright © 2020-2023  润新知