WordPress技巧

当前位置：首页 » 建站分享 » WordPress技巧 » WordPress彻底解决百度UEditor插件在历史文章中给图片带来的拉伸问题

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

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

最后更新时间：2016-06-16

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

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

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

解决方法：解决使用百度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”的高和宽。

先森在解决类似问题的文章中认识了两个函数，CONCAT和SUBSTRING_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