解決百度UEditor編輯器上傳的圖片無法被七牛CDN自動緩存問題

編輯：狂族晨曦 來源：WordPress技巧 日期：2016-01-19 閱讀： 4,544 次 1 條評論 » 百度已收錄

百度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.cnidcc.cn/ueditor')

即：用'src="//www.cnidcc.cn/ueditor'替換掉'src="/ueditor'。這樣非常簡單的就解決了問題，論學好知識的重要性。。。

有任何疑問，歡迎在下方評論區提出，也歡迎在頁面頂部右方關注我的微博（@成航先森）。