标签：UEditor

有朋友让教下怎么使用ueditor官方的进行手动集成为WordPress插件，先森就花了点时间研究了一下，现在把方法发布出来。ueditor编辑器文件准备1、首先需要下载一些文件，首先是下载官网最新的UEditor编辑器，现在最新的是1.4.3.3版。进入如下链接，下载PHP版：UEditor官方下载地址选择PHP版本下载2、下载百度UEditor编辑器插件1.4.3.1 For WordPress，我们需要用到一些里面的文件：百度网盘：链接: http://pan.baidu.com/s/1c1bKhNy 密码: sd46下载之后，分别解压，这时候就有了如下文件：当前拥有的文件手动集成其实手动集成的方法非常简单，只需复制下文件，修改个文件名即可。1、第一步，把“\Ueditor编辑器1.4.3.1 for wordpress 4.0插件\ueditor”文件夹内“main.php”和“ueditor.class.php”复制到“ueditor1_4_3_3-utf8-php”文件夹中：复制文件2、第二步，将“ueditor1_4_3_3-utf8-php”文件夹中的“utf8-php”文件夹重命名为“ueditor”：文件夹重命名3、第三步，将“ueditor1_4_3_3-utf8-php”文件夹中的文件打包为zip压缩包，手动集成最新版百度UEditor编辑器插件到WordPress就完成了，从WordPress后台上传插件启用就可以使用了：文件打包BUG修复先森发现，这样直接上传之后，后台编辑框的高度只有80px，非常不利于编辑。编辑器高度修改编辑框的高度很简单，直接在WordPress后台->插件->编辑，选择UEditor，编辑并更新ueditor.config.js中的第93行，将前面的双斜杠注释删掉，后面的高度数值改为想要的高度（建议值：500px）：后台编辑编辑更新之后，再看编辑器的效果如下（高度为320px）：修改效果总结虽然步骤简单，但若还是不想亲自操作的话，也可以下载先森编译好的最新版：百度网盘下载 链接: http://pan.baidu.com/s/1c2Biu9E 密码: chxs（成航先森）另外，先森只是实现了手动集成的效果，其他可能出现的BUG还没有发现或测试，如有疑问，欢迎发表评论。

其实本文着重介绍的不是彩色美化框，而是如何给百度UEditor编辑器增加自定义按钮。关于什么是彩色美化框，看过先森前文《WordPress默认TinyMCE编辑器增加彩色美化框自定义按钮》应该都知道的。其实也没什么，也就是给引用来的文字段加一个更明显的样式，就像下面这样。这是一个绿色提示框这种美化框，各位站长应该经常能见到，或许你也希望能给自己的WordPress上添加这种美化框。前文已经介绍过如何在WordPress默认的TinyMCE编辑器上添加，那么今天再来介绍下如何在百度UEditor编辑器上添加按钮了。注：本文中会增加4个按钮，代表着4中颜色的美化框。如果还没有安装百度UEditor编辑器，可以点击下载百度UEditor编辑器插件1.4.3.1 For WordPress前期准备1.添加短代码编辑WordPress主题目录下的functions.php文件，添加如下代码并保存:/**美化框的短代码*/function toz($atts, $content=null){return '<blockquote id="sc_notice">'.$content.'</blockquote>'; }  add_shortcode('v_notice','toz');  function toa($atts, $content=null){return '<blockquote id="sc_error">'.$content.'</blockquote>'; }  add_shortcode('v_error','toa');  function toc($atts, $content=null){return '<blockquote id="sc_warn">'.$content.'</blockquote>'; }  add_shortcode('v_warn','toc');  function tob($atts, $content=null){return '<blockquote id="sc_tips">'.$content.'</blockquote>'; }  add_shortcode('v_tips','tob');这个短代码的作用是，在编辑器中输入如下短代码后，在前台打开文章时，会把这些短代码变为上面我们定义的blockquote标签：编辑器中的短代码2.CSS美化将css代码放入主题的style.css文件中或其他地方：/*彩色美化框*/#sc_notice { color: #7da33c; background: #ecf2d6 url('images/sc/sc_notice.png') -1px -1px no-repeat; border: 1px solid #aac66d; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }#sc_warn, .post-password-form { color: #ad9948; background: #fff4b9 url('images/sc/sc_warn.png') -1px -1px no-repeat; border: 1px solid #eac946; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }#sc_error { color: #c66; background: #ffecea url('images/sc/sc_error.png') -1px -1px no-repeat; border: 1px solid #ebb1b1; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }#sc_tips {color: #7da33c;background: #ecf2d6 url('images/sc/sc_tips.png') -1px -1px no-repeat;border: 1px solid #aac66d;padding: 15px 15px 5px 35px;margin: 10px 0;width: 98%;overflow: hidden;}CSS代码中有4个图标链接，请将链接改为你保存的位置图标素材下载：链接: http://pan.baidu.com/s/1bo3ziCB 密码: chxs(成航先森)只有前期准备是对WordPress主题的代码添加，后面的步骤都是在UEditor编辑器插件的代码修改了。UEditor添加按钮本文参考：百度UEditor官方-UEditor二次开发-增加一个普通按钮（上）（下）百度UEditor官方-API文档第一步:添加按钮位置在/wp-content/plugins/ueditor/ueditor目录中，找到ueditor.config.js文件打开，找到ueditor.config.js文件中的toolbars参数，增加'v_notice', 'v_error', 'v_warn', 'v_tips'字符串，为了方便区分，我们可以在这四个字符串前加上一个'|'竖线。添加效果如图：第一步:添加按钮位置第二步：注册按钮实例还是在/wp-content/plugins/ueditor/ueditor目录中，找到ueditor.all.js文件打开，直接定位到大概第649行，有个数组如下：e="undo redo formatmatch bold italic underline fontborder touppercase tolowercase strikethrough subscript superscript source indent outdent blockquote pasteplain pagebreak selectall print horizontal removeformat time date unlink insertparagraphbeforetable insertrow insertcol mergeright mergedown deleterow deletecol splittorows splittocols splittocells mergecells deletetable drafts"在数组中的最后按格式添加第一步中的v_notice v_error v_warn v_tips四个字符串，添加效果如下：第二步：注册按钮实例这时候清空缓存刷新下页面，看看工具栏的对应位置是否出现了四个个自己定义的按钮呢？如下图所示：新增的4个按钮由于此时未设置对应按钮的图片样式，所以会显示默认的“B”字符。要想让其显示成自己需要的图标样式，接着按照下面的步骤动手吧。第三步：更改图标首先是更改图标为默认图标的方法。找到UEditor编辑器插件目录中的themes/default/ueditor.css文件，末尾增加一条样式定义:.edui-for-v_notice .edui-icon {    background-position: -700px -40px;}完成后刷新浏览器，可以看到此时第一个图标已经显示为如下图所示：第三步-修改图标此处的样式定义了showmsg图标在UEditor默认的精灵Icon图片（themes/default/images/icons.png）中的位置偏移。如需更改成另外图标，只需添加图标到该图片文件中，然后设置偏移值即可。先森已经将图标添加到icons.png图片中了（下图右侧），大家只需要将下图用新窗口打开，去掉图片链接后面的问号及参数另存，重命名后替换themes/default/images/icons.png图片即可：icon图标文件对应的，在themes/default/ueditor.css文件中添加的代码如下：.edui-for-v_notice .edui-icon {    background-position: -830px 0px;}.edui-for-v_error .edui-icon {    background-position: -830px -20px;}.edui-for-v_warn .edui-icon {    background-position: -830px -40px;}.edui-for-v_tips .edui-icon {    background-position: -850px 0px;}这时候，重新刷新浏览器，应该就可以看到如下效果了：更改图标的最终效果第四步：定义按钮事件处理方法到此为止，在UI层面已经完成了一个工具栏图标的显示，但是我们发现点击按钮之后毫无反应。那是必然的，我们还必须为该按钮绑定属于它自己的事件处理方法。实质上，此时一个默认的事件处理方法已经被UEditor绑定到按钮上了，只不过由于我们还没有定义该方法的具体内容，所以点击之后无任何变化。下面我们就来定义该方法的具体内容：再回到到ueditor.all.js文件，在521行（并不固定于521行，只要在其附近的一个分号后面另起一行即可）后另起一行，然后在该文件中输入如下代码：UE.commands['v_notice'] = { execCommand : function(){ var range = this.selection.getRange();        range.select();        var txt = this.selection.getText(); if (txt == ''){this.execCommand('insertHtml','绿色提示框：输入文字');} else{this.execCommand('insertHtml',''+txt+'');}    }};UE.commands['v_error'] = { execCommand : function(){ var range = this.selection.getRange();        range.select();        var txt = this.selection.getText(); if (txt == ''){this.execCommand('insertHtml','红色提示框：输入文字');} else{this.execCommand('insertHtml',''+txt+'');}    }};UE.commands['v_warn'] = { execCommand : function(){ var range = this.selection.getRange();        range.select();        var txt = this.selection.getText(); if (txt == ''){this.execCommand('insertHtml','黄色提示框：输入文字');} else{this.execCommand('insertHtml',''+txt+'');}    }};UE.commands['v_tips'] = { execCommand : function(){ var range = this.selection.getRange();        range.select();        var txt = this.selection.getText(); if (txt == ''){this.execCommand('insertHtml','灰色提示框：输入文字');} else{this.execCommand('insertHtml',''+txt+'');}    }};添加后代码中如下图：定义按钮事件处理方法这时候刷新浏览器，点击按钮，应该可以看到以下效果（图中先森是手动换行）：按钮功能效果代码解释：UE.commands['v_notice']这个表示注册一个命令。execCommand : function(){}execCommand是UEditor执行命令的通用接口。var range = this.selection.getRange();        range.select();        var txt = this.selection.getText();这一串是百度UEditor的ue.selection.getText();或者说是editor.selection.getText();命令的使用方法，其作用是获得当前选中的文本。因为添加了这个命令，所以使用按钮的时候，可以先将文字写好，然后选中后点击按钮。但遗憾的是选中的文字只能是纯文本，如果有链接或其他样式，选中后点击按钮也会变成纯文字。本来先森研究了半天也没搞懂editor.selection.getText();命令的使用方法，还是要多谢平平深度文件搜索软件，先森通过其深度搜索功能，在ueditor文件夹内搜索“selection.getText()”，这才找到了使用实例。然后if和else是为了判断是否选中了文本，最核心的其实就是下面这行代码：this.execCommand('insertHtml','灰色提示框：输入文字');这行代码就是插入HTML代码，代码内容为“[ v_tips]灰色提示框：输入文字[ /v_tips]”。更多功能命令，请查看UEditor官方文档和API文档。第五步：添加鼠标移上按钮时的提示其实到此为止，给UEditor添加按钮的功能已经完全实现了，但是我们还缺少一个不是那么重要的功能，也就是当鼠标移到按钮上的时候给出的提示。在标准版本里面，其实第一步里面就已经可以添加提示了，但是WordPress for UEditor插件用的是zh-cn这种自动多语言配置，所以我们还需要在翻译文件中添加提示语言。打开/wp-content/plugins/ueditor/ueditor/lang/zh-cn目录，打开zh-cn.js文件。在labelMap数组中添加4个对应提示：'v_notice':'绿色提示框', 'v_error':'红色提示框', 'v_warn':'黄色提示框', 'v_tips':'灰色提示框'添加后zh-cn.js内代码应该如下图：添加鼠标移上按钮时的提示到这里，给WordPress版UEditor编辑器增加四个彩色美化框自定义按钮就完全实现了。修改版下载可能有些小伙伴看了上文已经头大了，喜欢折腾的可以跟着折腾一番，如果实在不会折腾的，先森也把为写本教程制作出来的WordPress版UEditor编辑器插件分享给大家：百度云网盘下载：链接: http://pan.baidu.com/s/1i5i4M4P 密码: chxs（成航先森）写在最后本文一是提供一个给UEditor编辑器添加按钮的方法，而是添加彩色美化框的方法。先森觉得，有了添加按钮的方法最为重要，有了方法之后我们可以自定义更多方便的按钮。先森接下来想做的就是添加下载链接的按钮，让前台的下载链接显得更美观，不像上面那样光秃秃的一个链接。至于彩色美化框，先森觉得选中后会是链接什么的被过滤掉实在是个不小的BUG，所以希望未来能将其攻克，也希望有朋友能提供更好的代码，先森的JavaScript实在太差。

先森在新的友链伙伴闲鱼博客那里看到了一篇技术文，介绍的是WordPress短代码实现文章添加彩色美化框。可能看标题大家不太明白说的是什么，其实就是指的包裹着这段话的绿框框。先森觉得其美化效果是有了，但是却并不方便，所以对整个代码做了修改，增加了几个WordPress默认TinyMCE编辑器自定义按钮。点击按钮直接插入标签，更加方便实用。效果展示绿色输入框：输入文字红色提示框：输入文字黄色提示框：输入文字灰色提示框：输入文字这种彩色美化框非常常见，尤其是实用知更鸟主题的博客，先森的友链都有很多是实用的知更鸟主题。相信无论是知更鸟主题，还是这种美化框，都是很受欢迎的。效果实现在闲鱼博客那里，先森发现使用的是短代码实现的。但当先森研究了一下WordPress默认TinyMCE编辑器增加自定义按钮的时候发现，其实可以直接省略短代码那一步了，来看看怎么实现的吧。1.更改编辑器默认视图为HTML大家都知道，在后台新建文章后，编辑器就自动跳转到“可视化”视图，对于一些经常要插入代码或者WEB设计者们来说，可能更习惯使用HTML视图手动编辑。设置方法：将以下代码添加到主题的functions.php文件里即可：//更改编辑器默认视图为HTMadd_filter('wp_default_editor', create_function('', 'return "html";'));2.新增WordPress默认TinyMCE编辑器自定义按钮在WordPress主题的functions.php最后一个?>前加入一下代码：//添加HTML编辑器自定义快捷标签按钮add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');function bolo_after_wp_tiny_mce($mce_settings) {?><script type="text/javascript">QTags.addButton( 'v_notice', '绿色提示框', '<blockquote id="sc_notice">输入文字</blockquote>\n', "" );QTags.addButton( 'v_error', '红色提示框', '<blockquote id="sc_error">输入文字</blockquote>\n', "" );QTags.addButton( 'v_warn', '黄色提示框', '<blockquote id="sc_warn">输入文字</blockquote>\n', "" );QTags.addButton( 'v_tips', '灰色提示框', '<blockquote id="sc_tips">输入文字</blockquote>\n', "" );</script><?php}其中，主要设置自定义按钮的是这个函数：QTags.addButton( ”, ”, ”, ” );【四对引号，分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容（最后一对引号为空则一次输入全部内容），\n表示换行】形象说明： QTags.addButton( ‘ 按钮ID‘, ‘按钮显示名‘, ‘点一下输入内容‘, ‘点一下关闭内容‘ );可以自定义添加多行 QTags.addButton( ”, ”, ”, ” ); 增加多个按钮！3.CSS美化将css代码放入主题的style.css文件中或其他地方：/*彩色美化框*/#sc_notice { color: #7da33c; background: #ecf2d6 url('images/sc/sc_notice.png') -1px -1px no-repeat; border: 1px solid #aac66d; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }#sc_warn, .post-password-form { color: #ad9948; background: #fff4b9 url('images/sc/sc_warn.png') -1px -1px no-repeat; border: 1px solid #eac946; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }#sc_error { color: #c66; background: #ffecea url('images/sc/sc_error.png') -1px -1px no-repeat; border: 1px solid #ebb1b1; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }#sc_tips {color: #7da33c;background: #ecf2d6 url('images/sc/sc_tips.png') -1px -1px no-repeat;border: 1px solid #aac66d;padding: 15px 15px 5px 35px;margin: 10px 0;width: 98%;overflow: hidden;}CSS代码中有4个图标链接，请将链接改为你保存的位置图标素材下载：链接: http://pan.baidu.com/s/1bo3ziCB 密码: chxs(成航先森)4.后台效果完成以上步骤后，打开文章编辑界面，应该会看到以下效果：实现后台效果使用时，只需要将“输入文字”改为需要的文字即可。写在最后先森从开始WordPress建站之后，就将WordPress默认的TinyMCE编辑器换成了百度UEditor编辑器了，所以为了完成本文的效果还费了点功夫来熟悉默认编辑器。先森是两步一起走，同时还实现了为UEditor编辑器增加同样功能的自定义按钮。相较于UEditor，TinyMCE的自定义按钮就显得很小儿科了，方法先森过两天再分享出来。

先森很早就发现，手机端查看本站文章，文章里的图片会产生拉伸问题，即图片不是等比例缩放，而是高度或宽带其中一个自适应了，另一个保持不变。这就让图片看起来很长或很宽，很影响用户体验。而产生问题的原因，经过先森查明，发现是WordPress上安装的编辑器插件百度UEditor。先森曾经找到了解决新增的文章不再产生拉伸问题的方法，而对曾经发布的文章中的图片，则束手无策了。毕竟，如果历史文章少，还好一个一个的改回来。但先森已经发布了近两百篇文章，一篇一篇的改，太麻烦了。关于怎么使新增文章的图片不再受到该问题影响的方法，有同样问题的可以去看看：解决方法：解决使用百度UEditor编辑器后移动端图片被拉伸问题先森发现，不仅仅是移动端，PC端的图片其实也有影响，但影响基本不大，不像移动端那么容易被发现。先森文章中的图片都是被七牛裁剪过的，固定宽度为500px，高度随宽度自适应，并且还加上了水印。就是这个水印，让先森在查看历史文章的时候，发现了UEditor对PC端的影响。图片有明显的拉伸感（点击图片后按F查看原图）通过上面的水印，可以看出，整张图片有明显的拉伸感。而罪魁祸首，就是图片<img>标签中的样式代码：style="width: 766px; height: 291px;"而现实在右边，将这段样式设置注释后，图片就好看多了：图片恢复正常（点击图片后按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);上面的代码拿到数据库命令窗口去执行：第一次执行的结果（点击图片后按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);第二次执行的结果（点击图片后按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),'"');第三次执行的结果（点击图片后按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),'"'),'');第四次执行的结果（点击图片后按F查看原图）我们看上图，可以看到，图片<img>标签中，内置的样式代码已经成功的替换成无了，也就删除了。当然，到这里，先森都还是测试，能不能成功还要看最后真正的替换。执行代码通过上面一系列的测试，我们终于可以配置出最终的代码了：update wp_posts set post_content=REPLACE(post_content,CONCAT('style="width: ',SUBSTRING_INDEX(SUBSTRING_INDEX(post_content,'style="width: ',-1),'"',1),'"'),'')最终代码执行结果（点击图片后按F查看原图）可以看到，共影响了396行，当然并不是代表着修改了396篇文章。检验结果的时候来了，到后台删除所有缓存，到前台打开一些最早发布的文章，一查看，OK，成功的将内置style给删除了。先森无奈的发现，该方法如果文章中有设置不同宽高的两张及以上图片，则只会其中其中一张。如果图片的宽高数据完全相同，才会全部替换成功。研究各种语言还真是辛苦，还好先森各种语言以前都还多多少少有所学习，以及还好不会用到汇编语言。

先森在之前的文章页谈到过，先森想要将七牛云储存、Auto Highslide插件和百度UEditor编辑器三方面协调，在能够使Auto Highslide插件的灯箱效果不失效的情况下，让从百度UEditor编辑器插入的图片，在不被灯箱放大的时候，变成被七牛裁剪过的图片。即张戈博客提到过的：“那么读者打开文章页面时，浏览器只会加载这个300px的img中图，而用户如果想看清楚图片时，就会点击图片放大，这时候才会加载最清晰的完整图片！要知道，并不是每个读者都会想去看图片的！所以，暗箱放大功能可以变相的加快页面加载速度！因为你在文章中插入的是小体积的中等图，只有点击放大才会加载大图。”因为先森用的不是WordPress自带的编辑器已经早早的用上了百度UEditor编辑器，所以不能像张戈说的那样，在编辑的时候插图选择插中等大小的图，所以先森就得从百度UEditor编辑器这里下手了。关于WordPress百度UEditor编辑器的更多文章，大家可以看这些：百度UEditor编辑器插件1.4.3.1 For WordPress解决百度UEditor编辑器上传的图片无法被七牛CDN自动缓存问题解决使用百度UEditor编辑器后移动端图片被拉伸问题此次先森想要达到的目的，是图片从百度UEditor编辑器上传后，自动带上已经准备好的七牛裁剪代码：?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10这段代码会将图片裁剪为宽度500px，高度自适应，并带上先森设置的水印。先森本来想像“解决百度UEditor编辑器上传的图片无法被七牛CDN自动缓存问题”一文中的方法一样，修改/wp-content/plugins/ueditor/ueditor/php文件夹中的config.json文件。但先森无奈的发现，这里只能修改链接前缀，不能添加后缀，所以还需另寻他法了。先森又想起“解决使用百度UEditor编辑器后移动端图片被拉伸问题”一文中解决问题的方法，是注释了/wp-content/plugins/ueditor/ueditor/dialogs/image中image.js文件里的一段代码，这段代码是输出通过百度UEditor编辑器设置的图片的高宽，这导致了移动端图片被拉伸。这段代码附件的代码是以下内容：getInsertList: function () {            var data = this.getData();            if(data['url']) {         return [{                    src: data['url'],                    _src: data['url'],                    width: data['width'] || '',                    height: data['height'] || '',                    border: data['border'] || '',                    floatStyle: data['align'] || '',                    vspace: data['vhSpace'] || '',                    title: data['title'] || '',                    alt: data['title'] || '',                    /* style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"*/                }];            } else {                return [];            }        }这里的代码，是控制输出通过UEditor编辑器修改过的图片属性。先森看到了上面的“src: data['url'],”部分，再看到下面的被注释部分，照葫芦画瓢的修改了一下上面的代码：getInsertList: function () {            var data = this.getData();            if(data['url']) {         return [{                    src: data['url']+"?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10",                    _src: data['url']+"?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10",                    width: data['width'] || '',                    height: data['height'] || '',                    border: data['border'] || '',                    floatStyle: data['align'] || '',                    vspace: data['vhSpace'] || '',                    title: data['title'] || '',                    alt: data['title'] || '',                    /* style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"*/                }];            } else {                return [];            }        }就这样，删除浏览器缓存后再到后台尝试插入图片，结果没看到有添加成功，就以为是失败了。但后面想明白了，上面的代码控制的是输出通过UEditor编辑器修改后的数据。点击图片-修改，随便做个修改，再看代码，OK。图片链接后面添加上了七牛的裁剪代码。后来又操作了几下，发现高兴的太早。当你每次修改图片信息时，UEditor编辑器都会给你加一次七牛裁剪代码。这才明白，这里有个循环。通过设置变量“i=0”，结尾让“i++”，判断“if（i==0）”后发现，UEditor编辑器不仅仅是这一段代码循环，而是每次打开图片修改框，都会重新调用一次image.js。七牛裁剪代码产生了重复知道了问题所在就简单了，用JavaScript的indexOf()函数，判断指定的字符串值中是否存在于字符串中。关于这个函数的用法，可以参考：W3School：JavaScript indexOf() 方法明白了indexOf()函数的用法之后，先森对上面的代码做了如下调整：        getInsertList: function () {            var data = this.getData(); var abcd=data['url']; if (abcd.indexOf("/10/dy/10")<0){ data['url']=data['url']+"?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10";}            if(data['url']) { return [{                    src: data['url'],                    _src: data['url'],                    width: data['width'] || '',                    height: data['height'] || '',                    border: data['border'] || '',                    floatStyle: data['align'] || '',                    vspace: data['vhSpace'] || '',                    title: data['title'] || '',                    alt: data['title'] || '',                    /* style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"*/                }];            } else {                return [];            }        }然后经过测试，发现可行。上传图片后，打开图片的修改，做任意修改操作后会增加七牛裁剪代码，且不会重复。并且先森特意去服务器上查看了下图片上传的文件夹，发现这样操作代码并不会造成图片的二次上传。先森用测试文章插入图片，对图片的大小进行了对比：网页图片大小对比上图中，上面部分是在电脑上看到的图片原图信息，下面部分是网页中图片的信息。对比发现，原图大小是63.8KB，而经过七牛裁剪之后，图片大小减少到了35.1KB，几乎减少了一半，效果是非常明显的。但这样还是没有达到先森预期的效果，那就是点击图片会加载出原图大小。而这样操作之后，打开的图片还是被七牛裁剪过的。这算是一个小小的遗憾了，先森会再想办法解决。经过半天的研究，先森通过修改知更鸟鸟叔的代码，终于实现先森想要达到的效果：不点击图片的时候，显示被七牛裁剪成固定500px宽度的图片，点击后，显示七牛不裁剪但带了水印的图片。<script type="text/javascript">$(function() { $('#newsContent img').each(function(i){ if (! this.parentNode.href) {var imgsrc = this.src  //需要设置新的变量，不设置的话，会使不点击的图片链接也跟着改变if (imgsrc.indexOf("?") != -1){imgsrc=imgsrc.replace(/[^\?]*$/, "imageView2/1/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/5/dy/5");//替换问号后面的内容为新的内容} $(this).wrap("<a href='"+imgsrc+"' class='highslide-image' onclick='return hs.expand(this);'></a>"); } });});</script>用上面的代码替换鸟叔的代码即可达到目标。这里用的是replace()函数。这个函数的语法是:stringObject.replace(regexp/substr,replacement)要使用先森上面的代码达到七牛裁剪的效果，自己在七牛中设置好数据处理的样式后，替换先森的replacement段数据即可。

本站之前的文章，基本存在一个问题：用手机访问，查看文章时图片有明显纵向拉伸问题。之前觉得没什么，但是最近先森的强迫症犯了，非要把这个问题解决了不可。开始，先森以为是七牛缓存图片的设置问题，但是“七牛云储存”插件、七牛空间管理找来找去，设置多次之后，无奈的发现，问题还是没有解决。再后来，开始怀疑是阿里云主机的问题，但是通过测试也排除了。最后，通过站长之家的移动跨屏模拟，查看审查元素后发现，图片的高度，是先森在百度UEditor编辑器中给图片设置的高（图片单击放大）。经过调试发现，<img>标签中的style就是影响移动端自适应的问题所在。将整个style删除后，既不会影响PC端图片大小，也会使自适应恢复。这也是吃了直接用网上代码，先森自己没有研究过自适应的亏，发现问题还绕了很大的弯。通过排查发现，只要通过百度UEditor编辑器设置图片的宽高，即会自动添加width、height、border、vspace以及style属性，style属性中也包含width与height，也就是编辑器同时设置了两组宽高。而我们要做到的是使UEditor编辑器设置图片宽高时，不添加style属性。通过在官方文档中寻找解决方法无果后，开始在插件中的代码中寻找，终于找到了关键代码。在服务器中打开/wp-content/plugins/ueditor/ueditor/dialogs/image，找到image.js文件，打开编辑（点击放大）：如上图，打开并找到第279行，将以下代码删除或注释：style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"如此，即可解决设置图片时自动添加style的问题，也就解决了自适应问题。有任何疑问，欢迎在下方评论区提出，也欢迎在页面顶部右方关注我的微博（@成航先森）。

百度UEditor编辑器虽然非常好用，但是却也存在着一些与其它插件冲突的情况。下面要为大家分享的是通过百度UEditor编辑器上传的图片，无法被七牛CDN自动缓存的解决方法。之前为大家推荐了百度UEditor插件，不了解的可以看看：百度UEditor编辑器插件1.4.3.1 For WordPress原因分析通过百度UEditor编辑器上传的图片，通过审查元素我们可以看到，图片链接只有路径（点击放大）：而产生只有路径的原因是百度UEditor编辑器上传图片时自动添加的地址就只有路径：而要达到使七牛识别，图片链接就必须带上网站地址，如下图所示（点击放大）：解决方法我们需要达到的目标是链接完整，而UEditor编辑器上传的图片，从上传时的链接就不完整，所以我们需要解决的就是让UE编辑器总动在链接上添加网站链接，使链接完整。在服务器上打开/wp-content/plugins/ueditor/ueditor/php文件夹，找到config.json文件，编辑这个文件，打开如下（点击放大）：我们可以看到，小编为本站编辑好的第11行红框位置，只要在双引号中添加自己网站地址即可。2016年3月10日更新先森为了发出此文之前的文章内图片也能重新被七牛缓存，动了点脑子，想要解决这个问题。首先，之前的文章图片的问题就是只有链接只有路径，没有域名，所以先森首先想到的就是为图片添加域名。在2016年3月9日先森发布的文章中提到过，知更鸟为我们提供了一个为WordPress文章图片自动添加链接到原图的代码：WordPress插件Auto Highslide代码化折腾小记知更鸟的代码是为WordPress文章中图片添加链接，所以先森就想就此代码进行改编，使其能够为图片增加域名。先森的JavaScript纯属自学，而且只学了一点，虽然最后成功了，但其中的艰辛却无人可知。不多说，这接上最终代码：<script type="text/javascript">$(function() { $('#newsContent img').each(function(i){ var str=$(this).text()  //或许应该是var str=this.src if(str.indexOf("capjsj.cn")==-1){ $(this).attr("src",this.src); } });});</script>然而代码虽然是弄出来了，但是先森发现，这只是从表面上更改了链接，然而源代码确是没有改变，所以就无法缓存这些图片了。不过，虽然绕了个大弯子，但先森还是终于想到了正确的做法——替换。先森的数据库没有学好，所以一直小心翼翼的不敢去触碰数据库，但这次终于还是要碰了。数据库的替换语句大概是这样的：update 表 set 内容字段=replace(内容字段,'需要被替换字符串','替换字符串')先森的替换代码是这样的：update wp_posts set post_content=replace(post_content,'src="/ueditor','src="//www.capjsj.cn/ueditor')即：用'src="//www.capjsj.cn/ueditor'替换掉'src="/ueditor'。这样非常简单的就解决了问题，论学好知识的重要性。。。有任何疑问，欢迎在下方评论区提出，也欢迎在页面顶部右方关注我的微博（@成航先森）。

在很早以前，小编就觉得WordPress自带的编辑器很难用，简易又不适合中国人的口味，所以早早的就将编辑器换成了百度的UEditor编辑器。今天就为大家推荐下这款UEditor编辑器。首先，我们来将wordpress默认编辑器和百度UEdito编辑器做一个对比：WordPress默认编辑器：百度UEditor编辑器：UEdito简介： UEditor编辑器 For WordPress插件最早由taoqili开发，SamLiu改进,但两位作者均不再发布更新版本，大山在此基础上更新到Ueditor1.4.3.1。 UEditor编辑器内置了代码高亮功能，对于码农来说，简直是神器级编辑器插件啊。wordpress ueditor插件集成的功能：百度地图、音乐播放器、视频播放器、百度应用、谷歌地图。UEdito演示地址：http://ueditor.baidu.com/website/onlinedemo.html从演示地址不难看出这款插件的功能跟我们在平时百度知道发评论的时候的界面没有什么不同，对于国内的朋友来说，wordpress的编辑器功能实在是少的可怜，我们都是通过代码的修改来达到扩展编辑器的目的，甚至装上了编辑器扩展插件，以及代码高亮的插件，但是这款插件的功能十分丰富，用一句话来说就是只有你想不到的，没有这款插件没有的，如果你会修改该插件的代码还可以进行删除自己不喜欢的功能而实现功能的定制。插件下载百度网盘：链接: http://pan.baidu.com/s/1c1bKhNy 密码: sd46内容预览：安装插件前请查看使用说明，安装插件的时候请上传ueditor.zip。有任何疑问，欢迎在下方评论区提出，也欢迎在页面顶部右方关注我的微博（@成航先森）。