有朋友讓教下怎么使用ueditor官方的進行手動集成為WordPress插件，先森就花了點時間研究了一下，現(xiàn)在把方法發(fā)布出來。ueditor編輯器文件準(zhǔn)備1、首先需要下載一些文件，首先是下載官網(wǎng)最新的UEditor編輯器，現(xiàn)在最新的是1.4.3.3版。進入如下鏈接，下載PHP版：UEditor官方下載地址選擇PHP版本下載2、下載百度UEditor編輯器插件1.4.3.1 For WordPress，我們需要用到一些里面的文件：百度網(wǎng)盤：鏈接: http://pan.baidu.com/s/1c1bKhNy 密碼: sd46下載之后，分別解壓，這時候就有了如下文件：當(dāng)前擁有的文件手動集成其實手動集成的方法非常簡單，只需復(fù)制下文件，修改個文件名即可。1、第一步，把“\Ueditor編輯器1.4.3.1 for wordpress 4.0插件\ueditor”文件夾內(nèi)“main.php”和“ueditor.class.php”復(fù)制到“ueditor1_4_3_3-utf8-php”文件夾中：復(fù)制文件2、第二步，將“ueditor1_4_3_3-utf8-php”文件夾中的“utf8-php”文件夾重命名為“ueditor”：文件夾重命名3、第三步，將“ueditor1_4_3_3-utf8-php”文件夾中的文件打包為zip壓縮包，手動集成最新版百度UEditor編輯器插件到WordPress就完成了，從WordPress后臺上傳插件啟用就可以使用了：文件打包BUG修復(fù)先森發(fā)現(xiàn)，這樣直接上傳之后，后臺編輯框的高度只有80px，非常不利于編輯。編輯器高度修改編輯框的高度很簡單，直接在WordPress后臺->插件->編輯，選擇UEditor，編輯并更新ueditor.config.js中的第93行，將前面的雙斜杠注釋刪掉，后面的高度數(shù)值改為想要的高度（建議值：500px）：后臺編輯編輯更新之后，再看編輯器的效果如下（高度為320px）：修改效果總結(jié)雖然步驟簡單，但若還是不想親自操作的話，也可以下載先森編譯好的最新版：百度網(wǎng)盤下載 鏈接: http://pan.baidu.com/s/1c2Biu9E 密碼: chxs（成航先森）另外，先森只是實現(xiàn)了手動集成的效果，其他可能出現(xiàn)的BUG還沒有發(fā)現(xiàn)或測試，如有疑問，歡迎發(fā)表評論。

其實本文著重介紹的不是彩色美化框，而是如何給百度UEditor編輯器增加自定義按鈕。關(guān)于什么是彩色美化框，看過先森前文《WordPress默認(rèn)TinyMCE編輯器增加彩色美化框自定義按鈕》應(yīng)該都知道的。其實也沒什么，也就是給引用來的文字段加一個更明顯的樣式，就像下面這樣。這是一個綠色提示框這種美化框，各位站長應(yīng)該經(jīng)常能見到，或許你也希望能給自己的WordPress上添加這種美化框。前文已經(jīng)介紹過如何在WordPress默認(rèn)的TinyMCE編輯器上添加，那么今天再來介紹下如何在百度UEditor編輯器上添加按鈕了。注：本文中會增加4個按鈕，代表著4中顏色的美化框。如果還沒有安裝百度UEditor編輯器，可以點擊下載百度UEditor編輯器插件1.4.3.1 For WordPress前期準(zhǔn)備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');這個短代碼的作用是，在編輯器中輸入如下短代碼后，在前臺打開文章時，會把這些短代碼變?yōu)樯厦嫖覀兌x的blockquote標(biāo)簽：編輯器中的短代碼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個圖標(biāo)鏈接，請將鏈接改為你保存的位置圖標(biāo)素材下載：鏈接: http://pan.baidu.com/s/1bo3ziCB 密碼: chxs(成航先森)只有前期準(zhǔn)備是對WordPress主題的代碼添加，后面的步驟都是在UEditor編輯器插件的代碼修改了。UEditor添加按鈕本文參考：百度UEditor官方-UEditor二次開發(fā)-增加一個普通按鈕（上）（下）百度UEditor官方-API文檔第一步:添加按鈕位置在/wp-content/plugins/ueditor/ueditor目錄中，找到ueditor.config.js文件打開，找到ueditor.config.js文件中的toolbars參數(shù)，增加'v_notice', 'v_error', 'v_warn', 'v_tips'字符串，為了方便區(qū)分，我們可以在這四個字符串前加上一個'|'豎線。添加效果如圖：第一步:添加按鈕位置第二步：注冊按鈕實例還是在/wp-content/plugins/ueditor/ueditor目錄中，找到ueditor.all.js文件打開，直接定位到大概第649行，有個數(shù)組如下：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"在數(shù)組中的最后按格式添加第一步中的v_notice v_error v_warn v_tips四個字符串，添加效果如下：第二步：注冊按鈕實例這時候清空緩存刷新下頁面，看看工具欄的對應(yīng)位置是否出現(xiàn)了四個個自己定義的按鈕呢？如下圖所示：新增的4個按鈕由于此時未設(shè)置對應(yīng)按鈕的圖片樣式，所以會顯示默認(rèn)的“B”字符。要想讓其顯示成自己需要的圖標(biāo)樣式，接著按照下面的步驟動手吧。第三步：更改圖標(biāo)首先是更改圖標(biāo)為默認(rèn)圖標(biāo)的方法。找到UEditor編輯器插件目錄中的themes/default/ueditor.css文件，末尾增加一條樣式定義:.edui-for-v_notice .edui-icon {    background-position: -700px -40px;}完成后刷新瀏覽器，可以看到此時第一個圖標(biāo)已經(jīng)顯示為如下圖所示：第三步-修改圖標(biāo)此處的樣式定義了showmsg圖標(biāo)在UEditor默認(rèn)的精靈Icon圖片（themes/default/images/icons.png）中的位置偏移。如需更改成另外圖標(biāo)，只需添加圖標(biāo)到該圖片文件中，然后設(shè)置偏移值即可。先森已經(jīng)將圖標(biāo)添加到icons.png圖片中了（下圖右側(cè)），大家只需要將下圖用新窗口打開，去掉圖片鏈接后面的問號及參數(shù)另存，重命名后替換themes/default/images/icons.png圖片即可：icon圖標(biāo)文件對應(yīng)的，在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;}這時候，重新刷新瀏覽器，應(yīng)該就可以看到如下效果了：更改圖標(biāo)的最終效果第四步：定義按鈕事件處理方法到此為止，在UI層面已經(jīng)完成了一個工具欄圖標(biāo)的顯示，但是我們發(fā)現(xiàn)點擊按鈕之后毫無反應(yīng)。那是必然的，我們還必須為該按鈕綁定屬于它自己的事件處理方法。實質(zhì)上，此時一個默認(rèn)的事件處理方法已經(jīng)被UEditor綁定到按鈕上了，只不過由于我們還沒有定義該方法的具體內(nèi)容，所以點擊之后無任何變化。下面我們就來定義該方法的具體內(nèi)容：再回到到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+'');}    }};添加后代碼中如下圖：定義按鈕事件處理方法這時候刷新瀏覽器，點擊按鈕，應(yīng)該可以看到以下效果（圖中先森是手動換行）：按鈕功能效果代碼解釋：UE.commands['v_notice']這個表示注冊一個命令。execCommand : function(){}execCommand是UEditor執(zhí)行命令的通用接口。var range = this.selection.getRange();        range.select();        var txt = this.selection.getText();這一串是百度UEditor的ue.selection.getText();或者說是editor.selection.getText();命令的使用方法，其作用是獲得當(dāng)前選中的文本。因為添加了這個命令，所以使用按鈕的時候，可以先將文字寫好，然后選中后點擊按鈕。但遺憾的是選中的文字只能是純文本，如果有鏈接或其他樣式，選中后點擊按鈕也會變成純文字。本來先森研究了半天也沒搞懂editor.selection.getText();命令的使用方法，還是要多謝平平深度文件搜索軟件，先森通過其深度搜索功能，在ueditor文件夾內(nèi)搜索“selection.getText()”，這才找到了使用實例。然后if和else是為了判斷是否選中了文本，最核心的其實就是下面這行代碼：this.execCommand('insertHtml','灰色提示框：輸入文字');這行代碼就是插入HTML代碼，代碼內(nèi)容為“[ v_tips]灰色提示框：輸入文字[ /v_tips]”。更多功能命令，請查看UEditor官方文檔和API文檔。第五步：添加鼠標(biāo)移上按鈕時的提示其實到此為止，給UEditor添加按鈕的功能已經(jīng)完全實現(xiàn)了，但是我們還缺少一個不是那么重要的功能，也就是當(dāng)鼠標(biāo)移到按鈕上的時候給出的提示。在標(biāo)準(zhǔn)版本里面，其實第一步里面就已經(jīng)可以添加提示了，但是WordPress for UEditor插件用的是zh-cn這種自動多語言配置，所以我們還需要在翻譯文件中添加提示語言。打開/wp-content/plugins/ueditor/ueditor/lang/zh-cn目錄，打開zh-cn.js文件。在labelMap數(shù)組中添加4個對應(yīng)提示：'v_notice':'綠色提示框', 'v_error':'紅色提示框', 'v_warn':'黃色提示框', 'v_tips':'灰色提示框'添加后zh-cn.js內(nèi)代碼應(yīng)該如下圖：添加鼠標(biāo)移上按鈕時的提示到這里，給WordPress版UEditor編輯器增加四個彩色美化框自定義按鈕就完全實現(xiàn)了。修改版下載可能有些小伙伴看了上文已經(jīng)頭大了，喜歡折騰的可以跟著折騰一番，如果實在不會折騰的，先森也把為寫本教程制作出來的WordPress版UEditor編輯器插件分享給大家：百度云網(wǎng)盤下載：鏈接: http://pan.baidu.com/s/1i5i4M4P 密碼: chxs（成航先森）寫在最后本文一是提供一個給UEditor編輯器添加按鈕的方法，而是添加彩色美化框的方法。先森覺得，有了添加按鈕的方法最為重要，有了方法之后我們可以自定義更多方便的按鈕。先森接下來想做的就是添加下載鏈接的按鈕，讓前臺的下載鏈接顯得更美觀，不像上面那樣光禿禿的一個鏈接。至于彩色美化框，先森覺得選中后會是鏈接什么的被過濾掉實在是個不小的BUG，所以希望未來能將其攻克，也希望有朋友能提供更好的代碼，先森的JavaScript實在太差。

先森在新的友鏈伙伴閑魚博客那里看到了一篇技術(shù)文，介紹的是WordPress短代碼實現(xiàn)文章添加彩色美化框。可能看標(biāo)題大家不太明白說的是什么，其實就是指的包裹著這段話的綠框框。先森覺得其美化效果是有了，但是卻并不方便，所以對整個代碼做了修改，增加了幾個WordPress默認(rèn)TinyMCE編輯器自定義按鈕。點擊按鈕直接插入標(biāo)簽，更加方便實用。效果展示綠色輸入框：輸入文字紅色提示框：輸入文字黃色提示框：輸入文字灰色提示框：輸入文字這種彩色美化框非常常見，尤其是實用知更鳥主題的博客，先森的友鏈都有很多是實用的知更鳥主題。相信無論是知更鳥主題，還是這種美化框，都是很受歡迎的。效果實現(xiàn)在閑魚博客那里，先森發(fā)現(xiàn)使用的是短代碼實現(xiàn)的。但當(dāng)先森研究了一下WordPress默認(rèn)TinyMCE編輯器增加自定義按鈕的時候發(fā)現(xiàn)，其實可以直接省略短代碼那一步了，來看看怎么實現(xiàn)的吧。1.更改編輯器默認(rèn)視圖為HTML大家都知道，在后臺新建文章后，編輯器就自動跳轉(zhuǎn)到“可視化”視圖，對于一些經(jīng)常要插入代碼或者WEB設(shè)計者們來說，可能更習(xí)慣使用HTML視圖手動編輯。設(shè)置方法：將以下代碼添加到主題的functions.php文件里即可：//更改編輯器默認(rèn)視圖為HTMadd_filter('wp_default_editor', create_function('', 'return "html";'));2.新增WordPress默認(rèn)TinyMCE編輯器自定義按鈕在WordPress主題的functions.php最后一個?>前加入一下代碼：//添加HTML編輯器自定義快捷標(biāo)簽按鈕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}其中，主要設(shè)置自定義按鈕的是這個函數(shù)：QTags.addButton( ”, ”, ”, ” );【四對引號，分別表示按鈕的ID、按鈕顯示名、點一下輸入內(nèi)容、再點一下關(guān)閉內(nèi)容（最后一對引號為空則一次輸入全部內(nèi)容），\n表示換行】形象說明： QTags.addButton( ‘ 按鈕ID‘, ‘按鈕顯示名‘, ‘點一下輸入內(nèi)容‘, ‘點一下關(guān)閉內(nèi)容‘ );可以自定義添加多行 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個圖標(biāo)鏈接，請將鏈接改為你保存的位置圖標(biāo)素材下載：鏈接: http://pan.baidu.com/s/1bo3ziCB 密碼: chxs(成航先森)4.后臺效果完成以上步驟后，打開文章編輯界面，應(yīng)該會看到以下效果：實現(xiàn)后臺效果使用時，只需要將“輸入文字”改為需要的文字即可。寫在最后先森從開始WordPress建站之后，就將WordPress默認(rèn)的TinyMCE編輯器換成了百度UEditor編輯器了，所以為了完成本文的效果還費了點功夫來熟悉默認(rèn)編輯器。先森是兩步一起走，同時還實現(xiàn)了為UEditor編輯器增加同樣功能的自定義按鈕。相較于UEditor，TinyMCE的自定義按鈕就顯得很小兒科了，方法先森過兩天再分享出來。

先森很早就發(fā)現(xiàn)，手機端查看本站文章，文章里的圖片會產(chǎn)生拉伸問題，即圖片不是等比例縮放，而是高度或?qū)拵渲幸粋€自適應(yīng)了，另一個保持不變。這就讓圖片看起來很長或很寬，很影響用戶體驗。而產(chǎn)生問題的原因，經(jīng)過先森查明，發(fā)現(xiàn)是WordPress上安裝的編輯器插件百度UEditor。先森曾經(jīng)找到了解決新增的文章不再產(chǎn)生拉伸問題的方法，而對曾經(jīng)發(fā)布的文章中的圖片，則束手無策了。畢竟，如果歷史文章少，還好一個一個的改回來。但先森已經(jīng)發(fā)布了近兩百篇文章，一篇一篇的改，太麻煩了。關(guān)于怎么使新增文章的圖片不再受到該問題影響的方法，有同樣問題的可以去看看：解決方法：解決使用百度UEditor編輯器后移動端圖片被拉伸問題先森發(fā)現(xiàn)，不僅僅是移動端，PC端的圖片其實也有影響，但影響基本不大，不像移動端那么容易被發(fā)現(xiàn)。先森文章中的圖片都是被七牛裁剪過的，固定寬度為500px，高度隨寬度自適應(yīng)，并且還加上了水印。就是這個水印，讓先森在查看歷史文章的時候，發(fā)現(xiàn)了UEditor對PC端的影響。圖片有明顯的拉伸感（點擊圖片后按F查看原圖）通過上面的水印，可以看出，整張圖片有明顯的拉伸感。而罪魁禍?zhǔn)祝褪菆D片<img>標(biāo)簽中的樣式代碼：style="width: 766px; height: 291px;"而現(xiàn)實在右邊，將這段樣式設(shè)置注釋后，圖片就好看多了：圖片恢復(fù)正常（點擊圖片后按F查看原圖）近日，先森研究七牛的時候，發(fā)現(xiàn)了MySql的結(jié)構(gòu)化查詢語言對處理文章中出現(xiàn)的問題特別有幫助，所以先森就想試試用SQL語言來解決圖片拉伸的問題。接著先森就開始著手研究消除圖片<img>中的style樣式代碼了。因為每張圖片的高度設(shè)置都不一樣，所以代碼中肯定要用通配符。百度一下，說MySql中百分號“%”是統(tǒng)配一個或多個字符，果斷把以前常用的替換代碼修改了一下，拿去執(zhí)行：update `qdm********_db`.`wp_posts` set post_content=replace(post_content,'style="width: %px; height: %px;"','')執(zhí)行過后，清除緩存，文章刷新，發(fā)現(xiàn)并沒有什么卵用。結(jié)果百度replace函數(shù)，結(jié)果網(wǎng)上說這個函數(shù)并不能使用通配符。再找解決辦法，百度谷歌了半天，也只找到一個類似的，但是卻還是有些差別。沒辦法，先森只有開始了研究代碼之路。認(rèn)識MySql代碼首先是replace函數(shù)。REPLACE(str,from_str,to_str)返回字符串str中所有出現(xiàn)的字符串from_str替換為字符串to_str。from_str雖然不支持使用通配符，卻可以使用別的函數(shù)的返回值。也就是，我們可以用別的函數(shù)，通配出變化中的的“style”的高和寬。先森在解決類似問題的文章中認(rèn)識了兩個函數(shù)，CONCAT和SUBSTRING_INDEX。大寫的函數(shù)單詞可能會看著比較蛋疼，雖然大小寫并不會影響小型數(shù)據(jù)處理。但是代碼在執(zhí)行的時候，都會先把小寫轉(zhuǎn)換為大寫，再進行執(zhí)行。所以在寫代碼的時候，直接用大寫會減少執(zhí)行的時間。當(dāng)然，這是閑話了。關(guān)于這兩個函數(shù)的作用，首先是CONCAT。CONCAT(str1,str2,...)--例：CONCAT(成航,先森,...)最后生成“成航先森”返回的字符串參數(shù)連接的結(jié)果。也就是將str1、str2等各段都合并起來。然后是SUBSTRING_INDEX。SUBSTRING_INDEX(str,delim,count)--例：SUBSTRING_INDEX('www.cnidcc.cn', '.', 1)  會輸出“www”返回的子字符串str計數(shù)前出現(xiàn)的分隔符DELIM。如果計數(shù)是正的，左側(cè)的最后一個分隔符（從左邊算起）的一切被返回。如果計數(shù)為負(fù)，一切向右側(cè)的最后一個分隔符（計數(shù)從右側(cè)）將被返回。 SUBSTRING_INDEX()執(zhí)行區(qū)分大小寫的匹配時搜索DELIM。這個比較難理解，但是自己把上面的例子拿到數(shù)據(jù)庫命令窗口去多試幾遍就明白了。整理思路認(rèn)識了上面的三個函數(shù)，該怎么使用呢？我們可以逆推。最終要實現(xiàn)的，是將下面的代碼在表中注刪掉：style="width: 766px; height: 291px;"這個可以使用REPLACE函數(shù)，但是這個函數(shù)不能使用通配符。所以需要將“width: 766px; height: 291px”用別的函數(shù)通配出來。這里可以用SUBSTRING_INDEX函數(shù)，以style后面的兩個雙引號為分隔符，將中間的“width: 766px; height: 291px”提取出來。接著在用CONCAT函數(shù)將“width: 766px; height: 291px”前面的style="和后面的雙引號連接合并到一起，這樣就將整個“style="width: 766px; "text-indent: 2em;">則解決方法為：提取-->合并-->替換。測試代碼先說明，先森很囧的用SUBSTRING_INDEX把數(shù)據(jù)庫給毀了，因為錯誤的執(zhí)行了一行代碼，所有的圖片都沒有了。又沒辦法撤銷。所以把數(shù)據(jù)庫從備份還原了，還好先森在3月16號才備份了一次數(shù)據(jù)庫，17號只發(fā)布了4篇文章，影響不大。但就算這樣，先森把網(wǎng)站還原也用了近一個小時。所以備份很重要啊，尤其是要對數(shù)據(jù)庫進行數(shù)據(jù)處理之前。先森吃了虧，再進行操作的時候就小心翼翼的了。不敢直接拿數(shù)據(jù)庫動刀，只敢一點點的用測試代碼。復(fù)制了一整串受影響的<img>標(biāo)簽，先森開始了測試。<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;">由于先森的圖片增加了七牛裁剪代碼，所以代碼看著特別長，所以下文先森就在代碼中不寫圖片鏈接了，反正不影響測試。首先，我們需要從上面的標(biāo)簽中提取圖片的內(nèi)置寬高設(shè)置。而真正執(zhí)行的時候，需要搜索的對象是整個表，所以先森用分隔符是“style="width: ”，以避免別的style。需要用SUBSTRING_INDEX函數(shù)，先森用的代碼是：SELECT SUBSTRING_INDEX('<img title="成都航院正校門" alt="成都航院正校門" width="766" height="291" border="0" vspace="0" style="width: 766px; height: 291px;">','style="width: ',-1);上面的代碼拿到數(shù)據(jù)庫命令窗口去執(zhí)行：第一次執(zhí)行的結(jié)果（點擊圖片后按F查看原圖）我們可以看到輸出的結(jié)果是：766px; height: 291px;">而這個結(jié)果正是所有被搜索對象的分隔符后面所有內(nèi)容，也就是如果搜索對象是全文的話，這段代碼會輸出分割符后面所有的內(nèi)容，包括圖像標(biāo)簽以外文章正文。所以這肯定是還不行的。所以我們需要上面的輸出結(jié)果再用SUBSTRING_INDEX函數(shù)再提取一次。這次還需要加上上面的代碼，也就是：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);第二次執(zhí)行的結(jié)果（點擊圖片后按F查看原圖）經(jīng)過兩次的提取后，我們就得到了需要通配符匹配的結(jié)果：766px; height: 291px;既然能夠匹配出最麻煩的地方了，接下來也就簡單了。下面我們把需要用來搜索的地方用CONCAT函數(shù)鏈接起來。代碼：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),'"');第三次執(zhí)行的結(jié)果（點擊圖片后按F查看原圖）經(jīng)過復(fù)雜的提取和拼湊后，我們得到了需要用來搜索的部分：style="width: 766px; height: 291px;"既然得到了需要用來搜索的部分，在上面的函數(shù)外面再套上REPLACE函數(shù)就可以了：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),'"'),'');第四次執(zhí)行的結(jié)果（點擊圖片后按F查看原圖）我們看上圖，可以看到，圖片<img>標(biāo)簽中，內(nèi)置的樣式代碼已經(jīng)成功的替換成無了，也就刪除了。當(dāng)然，到這里，先森都還是測試，能不能成功還要看最后真正的替換。執(zhí)行代碼通過上面一系列的測試，我們終于可以配置出最終的代碼了：update wp_posts set post_content=REPLACE(post_content,CONCAT('style="width: ',SUBSTRING_INDEX(SUBSTRING_INDEX(post_content,'style="width: ',-1),'"',1),'"'),'')最終代碼執(zhí)行結(jié)果（點擊圖片后按F查看原圖）可以看到，共影響了396行，當(dāng)然并不是代表著修改了396篇文章。檢驗結(jié)果的時候來了，到后臺刪除所有緩存，到前臺打開一些最早發(fā)布的文章，一查看，OK，成功的將內(nèi)置style給刪除了。先森無奈的發(fā)現(xiàn)，該方法如果文章中有設(shè)置不同寬高的兩張及以上圖片，則只會其中其中一張。如果圖片的寬高數(shù)據(jù)完全相同，才會全部替換成功。研究各種語言還真是辛苦，還好先森各種語言以前都還多多少少有所學(xué)習(xí)，以及還好不會用到匯編語言。

先森在之前的文章頁談到過，先森想要將七牛云儲存、Auto Highslide插件和百度UEditor編輯器三方面協(xié)調(diào)，在能夠使Auto Highslide插件的燈箱效果不失效的情況下，讓從百度UEditor編輯器插入的圖片，在不被燈箱放大的時候，變成被七牛裁剪過的圖片。即張戈博客提到過的：“那么讀者打開文章頁面時，瀏覽器只會加載這個300px的img中圖，而用戶如果想看清楚圖片時，就會點擊圖片放大，這時候才會加載最清晰的完整圖片！要知道，并不是每個讀者都會想去看圖片的！所以，暗箱放大功能可以變相的加快頁面加載速度！因為你在文章中插入的是小體積的中等圖，只有點擊放大才會加載大圖。”因為先森用的不是WordPress自帶的編輯器已經(jīng)早早的用上了百度UEditor編輯器，所以不能像張戈說的那樣，在編輯的時候插圖選擇插中等大小的圖，所以先森就得從百度UEditor編輯器這里下手了。關(guān)于WordPress百度UEditor編輯器的更多文章，大家可以看這些：百度UEditor編輯器插件1.4.3.1 For WordPress解決百度UEditor編輯器上傳的圖片無法被七牛CDN自動緩存問題解決使用百度UEditor編輯器后移動端圖片被拉伸問題此次先森想要達到的目的，是圖片從百度UEditor編輯器上傳后，自動帶上已經(jīng)準(zhǔn)備好的七牛裁剪代碼：?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10這段代碼會將圖片裁剪為寬度500px，高度自適應(yīng)，并帶上先森設(shè)置的水印。先森本來想像“解決百度UEditor編輯器上傳的圖片無法被七牛CDN自動緩存問題”一文中的方法一樣，修改/wp-content/plugins/ueditor/ueditor/php文件夾中的config.json文件。但先森無奈的發(fā)現(xiàn)，這里只能修改鏈接前綴，不能添加后綴，所以還需另尋他法了。先森又想起“解決使用百度UEditor編輯器后移動端圖片被拉伸問題”一文中解決問題的方法，是注釋了/wp-content/plugins/ueditor/ueditor/dialogs/image中image.js文件里的一段代碼，這段代碼是輸出通過百度UEditor編輯器設(shè)置的圖片的高寬，這導(dǎo)致了移動端圖片被拉伸。這段代碼附件的代碼是以下內(nèi)容：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 [];            }        }就這樣，刪除瀏覽器緩存后再到后臺嘗試插入圖片，結(jié)果沒看到有添加成功，就以為是失敗了。但后面想明白了，上面的代碼控制的是輸出通過UEditor編輯器修改后的數(shù)據(jù)。點擊圖片-修改，隨便做個修改，再看代碼，OK。圖片鏈接后面添加上了七牛的裁剪代碼。后來又操作了幾下，發(fā)現(xiàn)高興的太早。當(dāng)你每次修改圖片信息時，UEditor編輯器都會給你加一次七牛裁剪代碼。這才明白，這里有個循環(huán)。通過設(shè)置變量“i=0”，結(jié)尾讓“i++”，判斷“if（i==0）”后發(fā)現(xiàn)，UEditor編輯器不僅僅是這一段代碼循環(huán)，而是每次打開圖片修改框，都會重新調(diào)用一次image.js。七牛裁剪代碼產(chǎn)生了重復(fù)知道了問題所在就簡單了，用JavaScript的indexOf()函數(shù)，判斷指定的字符串值中是否存在于字符串中。關(guān)于這個函數(shù)的用法，可以參考：W3School：JavaScript indexOf() 方法明白了indexOf()函數(shù)的用法之后，先森對上面的代碼做了如下調(diào)整：        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 [];            }        }然后經(jīng)過測試，發(fā)現(xiàn)可行。上傳圖片后，打開圖片的修改，做任意修改操作后會增加七牛裁剪代碼，且不會重復(fù)。并且先森特意去服務(wù)器上查看了下圖片上傳的文件夾，發(fā)現(xiàn)這樣操作代碼并不會造成圖片的二次上傳。先森用測試文章插入圖片，對圖片的大小進行了對比：網(wǎng)頁圖片大小對比上圖中，上面部分是在電腦上看到的圖片原圖信息，下面部分是網(wǎng)頁中圖片的信息。對比發(fā)現(xiàn)，原圖大小是63.8KB，而經(jīng)過七牛裁剪之后，圖片大小減少到了35.1KB，幾乎減少了一半，效果是非常明顯的。但這樣還是沒有達到先森預(yù)期的效果，那就是點擊圖片會加載出原圖大小。而這樣操作之后，打開的圖片還是被七牛裁剪過的。這算是一個小小的遺憾了，先森會再想辦法解決。經(jīng)過半天的研究，先森通過修改知更鳥鳥叔的代碼，終于實現(xiàn)先森想要達到的效果：不點擊圖片的時候，顯示被七牛裁剪成固定500px寬度的圖片，點擊后，顯示七牛不裁剪但帶了水印的圖片。<script type="text/javascript">$(function() { $('#newsContent img').each(function(i){ if (! this.parentNode.href) {var imgsrc = this.src  //需要設(shè)置新的變量，不設(shè)置的話，會使不點擊的圖片鏈接也跟著改變if (imgsrc.indexOf("?") != -1){imgsrc=imgsrc.replace(/[^\?]*$/, "imageView2/1/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/5/dy/5");//替換問號后面的內(nèi)容為新的內(nèi)容} $(this).wrap("<a href='"+imgsrc+"' class='highslide-image' onclick='return hs.expand(this);'></a>"); } });});</script>用上面的代碼替換鳥叔的代碼即可達到目標(biāo)。這里用的是replace()函數(shù)。這個函數(shù)的語法是:stringObject.replace(regexp/substr,replacement)要使用先森上面的代碼達到七牛裁剪的效果，自己在七牛中設(shè)置好數(shù)據(jù)處理的樣式后，替換先森的replacement段數(shù)據(jù)即可。

本站之前的文章，基本存在一個問題：用手機訪問，查看文章時圖片有明顯縱向拉伸問題。之前覺得沒什么，但是最近先森的強迫癥犯了，非要把這個問題解決了不可。開始，先森以為是七牛緩存圖片的設(shè)置問題，但是“七牛云儲存”插件、七牛空間管理找來找去，設(shè)置多次之后，無奈的發(fā)現(xiàn)，問題還是沒有解決。再后來，開始懷疑是阿里云主機的問題，但是通過測試也排除了。最后，通過站長之家的移動跨屏模擬，查看審查元素后發(fā)現(xiàn)，圖片的高度，是先森在百度UEditor編輯器中給圖片設(shè)置的高（圖片單擊放大）。經(jīng)過調(diào)試發(fā)現(xiàn)，<img>標(biāo)簽中的style就是影響移動端自適應(yīng)的問題所在。將整個style刪除后，既不會影響PC端圖片大小，也會使自適應(yīng)恢復(fù)。這也是吃了直接用網(wǎng)上代碼，先森自己沒有研究過自適應(yīng)的虧，發(fā)現(xiàn)問題還繞了很大的彎。通過排查發(fā)現(xiàn)，只要通過百度UEditor編輯器設(shè)置圖片的寬高，即會自動添加width、height、border、vspace以及style屬性，style屬性中也包含width與height，也就是編輯器同時設(shè)置了兩組寬高。而我們要做到的是使UEditor編輯器設(shè)置圖片寬高時，不添加style屬性。通過在官方文檔中尋找解決方法無果后，開始在插件中的代碼中尋找，終于找到了關(guān)鍵代碼。在服務(wù)器中打開/wp-content/plugins/ueditor/ueditor/dialogs/image，找到image.js文件，打開編輯（點擊放大）：如上圖，打開并找到第279行，將以下代碼刪除或注釋：style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"如此，即可解決設(shè)置圖片時自動添加style的問題，也就解決了自適應(yīng)問題。有任何疑問，歡迎在下方評論區(qū)提出，也歡迎在頁面頂部右方關(guān)注我的微博（@成航先森）。

百度UEditor編輯器雖然非常好用，但是卻也存在著一些與其它插件沖突的情況。下面要為大家分享的是通過百度UEditor編輯器上傳的圖片，無法被七牛CDN自動緩存的解決方法。之前為大家推薦了百度UEditor插件，不了解的可以看看：百度UEditor編輯器插件1.4.3.1 For WordPress原因分析通過百度UEditor編輯器上傳的圖片，通過審查元素我們可以看到，圖片鏈接只有路徑（點擊放大）：而產(chǎn)生只有路徑的原因是百度UEditor編輯器上傳圖片時自動添加的地址就只有路徑：而要達到使七牛識別，圖片鏈接就必須帶上網(wǎng)站地址，如下圖所示（點擊放大）：解決方法我們需要達到的目標(biāo)是鏈接完整，而UEditor編輯器上傳的圖片，從上傳時的鏈接就不完整，所以我們需要解決的就是讓UE編輯器總動在鏈接上添加網(wǎng)站鏈接，使鏈接完整。在服務(wù)器上打開/wp-content/plugins/ueditor/ueditor/php文件夾，找到config.json文件，編輯這個文件，打開如下（點擊放大）：我們可以看到，小編為本站編輯好的第11行紅框位置，只要在雙引號中添加自己網(wǎng)站地址即可。2016年3月10日更新先森為了發(fā)出此文之前的文章內(nèi)圖片也能重新被七牛緩存，動了點腦子，想要解決這個問題。首先，之前的文章圖片的問題就是只有鏈接只有路徑，沒有域名，所以先森首先想到的就是為圖片添加域名。在2016年3月9日先森發(fā)布的文章中提到過，知更鳥為我們提供了一個為WordPress文章圖片自動添加鏈接到原圖的代碼：WordPress插件Auto Highslide代碼化折騰小記知更鳥的代碼是為WordPress文章中圖片添加鏈接，所以先森就想就此代碼進行改編，使其能夠為圖片增加域名。先森的JavaScript純屬自學(xué)，而且只學(xué)了一點，雖然最后成功了，但其中的艱辛卻無人可知。不多說，這接上最終代碼：<script type="text/javascript">$(function() { $('#newsContent img').each(function(i){ var str=$(this).text()  //或許應(yīng)該是var str=this.src if(str.indexOf("capjsj.cn")==-1){ $(this).attr("src",this.src); } });});</script>然而代碼雖然是弄出來了，但是先森發(fā)現(xiàn)，這只是從表面上更改了鏈接，然而源代碼確是沒有改變，所以就無法緩存這些圖片了。不過，雖然繞了個大彎子，但先森還是終于想到了正確的做法——替換。先森的數(shù)據(jù)庫沒有學(xué)好，所以一直小心翼翼的不敢去觸碰數(shù)據(jù)庫，但這次終于還是要碰了。數(shù)據(jù)庫的替換語句大概是這樣的：update 表 set 內(nèi)容字段=replace(內(nèi)容字段,'需要被替換字符串','替換字符串')先森的替換代碼是這樣的：update wp_posts set post_content=replace(post_content,'src="/ueditor','src="//www.cnidcc.cn/ueditor')即：用'src="//www.cnidcc.cn/ueditor'替換掉'src="/ueditor'。這樣非常簡單的就解決了問題，論學(xué)好知識的重要性。。。有任何疑問，歡迎在下方評論區(qū)提出，也歡迎在頁面頂部右方關(guān)注我的微博（@成航先森）。

在很早以前，小編就覺得WordPress自帶的編輯器很難用，簡易又不適合中國人的口味，所以早早的就將編輯器換成了百度的UEditor編輯器。今天就為大家推薦下這款UEditor編輯器。首先，我們來將wordpress默認(rèn)編輯器和百度UEdito編輯器做一個對比：WordPress默認(rèn)編輯器：百度UEditor編輯器：UEdito簡介： UEditor編輯器 For WordPress插件最早由taoqili開發(fā)，SamLiu改進,但兩位作者均不再發(fā)布更新版本，大山在此基礎(chǔ)上更新到Ueditor1.4.3.1。 UEditor編輯器內(nèi)置了代碼高亮功能，對于碼農(nóng)來說，簡直是神器級編輯器插件啊。wordpress ueditor插件集成的功能：百度地圖、音樂播放器、視頻播放器、百度應(yīng)用、谷歌地圖。UEdito演示地址：http://ueditor.baidu.com/website/onlinedemo.html從演示地址不難看出這款插件的功能跟我們在平時百度知道發(fā)評論的時候的界面沒有什么不同，對于國內(nèi)的朋友來說，wordpress的編輯器功能實在是少的可憐，我們都是通過代碼的修改來達到擴展編輯器的目的，甚至裝上了編輯器擴展插件，以及代碼高亮的插件，但是這款插件的功能十分豐富，用一句話來說就是只有你想不到的，沒有這款插件沒有的，如果你會修改該插件的代碼還可以進行刪除自己不喜歡的功能而實現(xiàn)功能的定制。插件下載百度網(wǎng)盤：鏈接: http://pan.baidu.com/s/1c1bKhNy 密碼: sd46內(nèi)容預(yù)覽：安裝插件前請查看使用說明，安裝插件的時候請上傳ueditor.zip。有任何疑問，歡迎在下方評論區(qū)提出，也歡迎在頁面頂部右方關(guān)注我的微博（@成航先森）。