郭大路路 2019-02-28
今天运营MM突然说,资讯管理功能用不了,从别的微信公号里复制过来的文章的图片显示不了。这个天下文章一大抄。。。
好吧,开始干活。先重现下问题,登录,打开新增资讯页,里面有个富文本编辑器,用的百度ueditor。再打开运营MM给我的文章链接,复制图文到富文本编辑器里,果然图片都显示不了。换篇别的试试?随便找了篇新浪的新闻,c&p套餐操作下,咦,又能正常显示图文。
奇了怪了,F12看看控制台。发现不能显示图片的时候报了cross origin错误。为啥新浪复制过来的图文没事?继续跟进,原来ueditor会自动下载富文本编辑器里的图片到本地(有个controller.jsp),从新浪复制过来的图文正常下载了图片,在富文本编辑器里显示的图片是本地链接,自然不会cross origin。而从微信号里复制过来的图文下载图片失败,ueditor就默认还是用原来的图片链接地址,于是报了cross origin错误。
继续跟进,为啥下载不了呢?原来从微信号里复制过来的图片是image/webp类型的,而在ueditor的MIMEType.types里没有这种类型的图片,于是ueditor就说类型没匹配上,不干活了。
不干活不行啊,研究下怎么加上这个类型,ueditor有个配置文件config.json,看了半天,好像没地方加。。。,看了下源码,几种匹配的图片类型是写在MIMEType.types这个静态map里的,还好是public的,于是再去下载图片之前,加上一句MIMEType.types.put("image/webp", ".jpeg");试试吧,哦耶图片可以显示了。
于是喜滋滋的跟运营MM说,哥帮你搞定了,看看吧。MM们试了试,纷纷称赞腻害啊,哥。哈哈虚荣心得到满足。
但是事情往往比想象的复杂,过了会,MM们又说,维护的资讯文章,在手机上显示不了。。。继续继续,Come on, bugs!
仔细看了看,图片确实没显示,但是占位还是占了。来吧,把链接复制到电脑上打开,F12大法调教调教。奇怪的事情又来了,在电脑上又是正常的,换个手机看看,也是正常。。。
为啥啊?一道亮光出现在脑海中——不能显示图片的是苹果手机。于是速度打开百度,关键字IOS webp,果然,苹果现在还不支持webp格式的图片。找到问题的原因了,怎么办呢?第一反应就想把图片格式转转呗,貌似so easy。
百度大法走起,总共试了3种转换的方法,https://segmentfault.com/a/1190000016324137比较靠谱,终于搞定,打完收工
将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor. <textarea type="text" name="content" id="Edito