WordPress百度UEditor編輯器自動添加七牛云儲存裁剪代碼

編輯：狂族晨曦 來源：WordPress技巧 日期：2016-03-11 閱讀： 6,238 次 3 條評論 » 百度已收錄

先森在之前的文章頁談到過，先森想要將七牛云儲存、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段數據即可。