成航先森 成航先森

成都航院计算机系一个学生的个人博客

 

WordPress技巧

分段图

最新文章

WordPress技巧
当前位置: 首页 » 大学杂谈 » WordPress技巧 » WordPress彻底解决百度UEditor插件在历史文章中给图片带来的拉伸问题

WordPress彻底解决百度UEditor插件在历史文章中给图片带来的拉伸问题

编辑:狂族晨曦 来源:WordPress技巧 日期:2016-03-19 阅读: 1,209 次 抢个沙发 百度已收录

先森很早就发现,手机端查看本站文章,文章里的图片会产生拉伸问题,即图片不是等比例缩放,而是高度或宽带其中一个自适应了,另一个保持不变。这就让图片看起来很长或很宽,很影响用户体验。

而产生问题的原因,经过先森查明,发现是WordPress上安装的编辑器插件百度UEditor。先森曾经找到了解决新增的文章不再产生拉伸问题的方法,而对曾经发布的文章中的图片,则束手无策了。毕竟,如果历史文章少,还好一个一个的改回来。但先森已经发布了近两百篇文章,一篇一篇的改,太麻烦了。

关于怎么使新增文章的图片不再受到该问题影响的方法,有同样问题的可以去看看:

先森发现,不仅仅是移动端,PC端的图片其实也有影响,但影响基本不大,不像移动端那么容易被发现。先森文章中的图片都是被七牛裁剪过的,固定宽度为500px,高度随宽度自适应,并且还加上了水印。就是这个水印,让先森在查看历史文章的时候,发现了UEditor对PC端的影响。

图片有明显的拉伸感 -1

图片有明显的拉伸感(点击图片后按F查看原图)

通过上面的水印,可以看出,整张图片有明显的拉伸感。而罪魁祸首,就是图片<img>标签中的样式代码:

style="width: 766px; height: 291px;"

而现实在右边,将这段样式设置注释后,图片就好看多了:

图片恢复正常 -2

图片恢复正常(点击图片后按F查看原图)

近日,先森研究七牛的时候,发现了MySql的结构化查询语言对处理文章中出现的问题特别有帮助,所以先森就想试试用SQL语言来解决图片拉伸的问题。接着先森就开始着手研究消除图片<img>中的style样式代码了。

因为每张图片的高度设置都不一样,所以代码中肯定要用通配符。百度一下,说MySql中百分号“%”是统配一个或多个字符,果断把以前常用的替换代码修改了一下,拿去执行:

update `qdm********_db`.`wp_posts` set post_content=replace(post_content,'style="width: %px; height: %px;"','')

执行过后,清除缓存,文章刷新,发现并没有什么卵用。

结果百度replace函数,结果网上说这个函数并不能使用通配符。再找解决办法,百度谷歌了半天,也只找到一个类似的,但是却还是有些差别。没办法,先森只有开始了研究代码之路。

认识MySql代码

首先是replace函数。

REPLACE(str,from_str,to_str)

返回字符串str中所有出现的字符串from_str替换为字符串to_str。

from_str虽然不支持使用通配符,却可以使用别的函数的返回值。也就是,我们可以用别的函数,通配出变化中的的“style”的高和宽。

先森在解决类似问题的文章中认识了两个函数,CONCATSUBSTRING_INDEX。大写的函数单词可能会看着比较蛋疼,虽然大小写并不会影响小型数据处理。但是代码在执行的时候,都会先把小写转换为大写,再进行执行。所以在写代码的时候,直接用大写会减少执行的时间。当然,这是闲话了。

关于这两个函数的作用,首先是CONCAT。

CONCAT(str1,str2,...)
--例:CONCAT(成航,先森,...)最后生成“成航先森”

返回的字符串参数连接的结果。也就是将str1、str2等各段都合并起来。

然后是SUBSTRING_INDEX。

SUBSTRING_INDEX(str,delim,count)
--例:SUBSTRING_INDEX('www.capjsj.cn', '.', 1)  会输出“www”

返回的子字符串str计数前出现的分隔符DELIM。如果计数是正的,左侧的最后一个分隔符(从左边算起)的一切被返回。如果计数为负,一切向右侧的最后一个分隔符(计数从右侧)将被返回。 SUBSTRING_INDEX()执行区分大小写的匹配时搜索DELIM。这个比较难理解,但是自己把上面的例子拿到数据库命令窗口去多试几遍就明白了。

整理思路

认识了上面的三个函数,该怎么使用呢?我们可以逆推。

最终要实现的,是将下面的代码在表中注删掉:

style="width: 766px; height: 291px;"

这个可以使用REPLACE函数,但是这个函数不能使用通配符。所以需要将“width: 766px; height: 291px”用别的函数通配出来。

这里可以用SUBSTRING_INDEX函数,以style后面的两个双引号为分隔符,将中间的width: 766px; height: 291px”提取出来。

接着在用CONCAT函数将width: 766px; height: 291px”前面的style="和后面的双引号连接合并到一起,这样就将整个“style="width: 766px; "text-indent: 2em;">则解决方法为:提取-->合并-->替换。

测试代码

先说明,先森很囧的用SUBSTRING_INDEX把数据库给毁了,因为错误的执行了一行代码,所有的图片都没有了。又没办法撤销。所以把数据库从备份还原了,还好先森在3月16号才备份了一次数据库,17号只发布了4篇文章,影响不大。但就算这样,先森把网站还原也用了近一个小时。所以备份很重要啊,尤其是要对数据库进行数据处理之前。

先森吃了亏,再进行操作的时候就小心翼翼的了。不敢直接拿数据库动刀,只敢一点点的用测试代码。

复制了一整串受影响的<img>标签,先森开始了测试。

<img title="成都航院正校门" alt="成都航院正校门" src="http://img.capjsj.cn/ueditor/php/upload/image/20150622/1434945153483522.jpg" width="766" height="291" border="0" vspace="0" style="width: 766px; height: 291px;">

由于先森的图片增加了七牛裁剪代码,所以代码看着特别长,所以下文先森就在代码中不写图片链接了,反正不影响测试。

首先,我们需要从上面的标签中提取图片的内置宽高设置。而真正执行的时候,需要搜索的对象是整个表,所以先森用分隔符是“style="width: ”,以避免别的style。需要用SUBSTRING_INDEX函数,先森用的代码是:

SELECT SUBSTRING_INDEX('<img title="成都航院正校门" alt="成都航院正校门" width="766" height="291" border="0" vspace="0" style="width: 766px; height: 291px;">','style="width: ',-1);

上面的代码拿到数据库命令窗口去执行:

第一次执行的结果 -3

第一次执行的结果(点击图片后按F查看原图)

我们可以看到输出的结果是:

766px; height: 291px;">

而这个结果正是所有被搜索对象的分隔符后面所有内容,也就是如果搜索对象是全文的话,这段代码会输出分割符后面所有的内容,包括图像标签以外文章正文。所以这肯定是还不行的。

所以我们需要上面的输出结果再用SUBSTRING_INDEX函数再提取一次。这次还需要加上上面的代码,也就是:

SELECT SUBSTRING_INDEX(SUBSTRING_INDEX('<img title="成都航院正校门" alt="成都航院正校门" width="766" height="291" border="0" vspace="0" style="width: 766px; height: 291px;">','style="width: ',-1),'"',1);

第二次执行的结果 -4

第二次执行的结果(点击图片后按F查看原图)

经过两次的提取后,我们就得到了需要通配符匹配的结果:

766px; height: 291px;

既然能够匹配出最麻烦的地方了,接下来也就简单了。

下面我们把需要用来搜索的地方用CONCAT函数链接起来。代码:

SELECT CONCAT('style="width: ',SUBSTRING_INDEX(SUBSTRING_INDEX('<img title="成都航院正校门" alt="成都航院正校门" width="766" height="291" border="0" vspace="0" style="width: 766px; height: 291px;">','style="width: ',-1),'"',1),'"');

第三次执行的结果 -5

第三次执行的结果(点击图片后按F查看原图)

经过复杂的提取和拼凑后,我们得到了需要用来搜索的部分:

style="width: 766px; height: 291px;"

既然得到了需要用来搜索的部分,在上面的函数外面再套上REPLACE函数就可以了:

SELECT REPLACE('<img title="成都航院正校门" alt="成都航院正校门" width="766" height="291" border="0" vspace="0" style="width: 766px; height: 291px;">',CONCAT('style="width: ',SUBSTRING_INDEX(SUBSTRING_INDEX('<img title="成都航院正校门" alt="成都航院正校门" width="766" height="291" border="0" vspace="0" style="width: 766px; height: 291px;">','style="width: ',-1),'"',1),'"'),'');

第四次执行代码的结果 -6

第四次执行的结果(点击图片后按F查看原图)

我们看上图,可以看到,图片<img>标签中,内置的样式代码已经成功的替换成无了,也就删除了。

当然,到这里,先森都还是测试,能不能成功还要看最后真正的替换。

执行代码

通过上面一系列的测试,我们终于可以配置出最终的代码了:

update wp_posts set post_content=REPLACE(post_content,CONCAT('style="width: ',SUBSTRING_INDEX(SUBSTRING_INDEX(post_content,'style="width: ',-1),'"',1),'"'),'')

最终代码执行结果 -7

最终代码执行结果(点击图片后按F查看原图)

可以看到,共影响了396行,当然并不是代表着修改了396篇文章。

检验结果的时候来了,到后台删除所有缓存,到前台打开一些最早发布的文章,一查看,OK,成功的将内置style给删除了先森无奈的发现,该方法如果文章中有设置不同宽高的两张及以上图片,则只会其中其中一张。如果图片的宽高数据完全相同,才会全部替换成功。

研究各种语言还真是辛苦,还好先森各种语言以前都还多多少少有所学习,以及还好不会用到汇编语言。

历史上的今天:

标签:
除特别注明外,本站所有文章均为成航先森 www.capjsj.cn原创,本文共4732个字
转载请注明出处来自http://www.capjsj.cn/wp_cdjjbdueditorcjzlswzzgtpdldlswt.html
已有 0 位"计工"发布了激烈的评论,还有N多人围观笑而不语评论
匿名的头像
欢迎发表评论
取消评论

表情
疑问调皮伤心抠鼻黑线微笑可爱奸笑震惊吓到了撇嘴大兵忍不住笑笑狂骂狂怒噢?鼓掌酷⊙﹏⊙b汗鄙视大哭嘿嘿

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
官方微信
发表评论 返回顶部