ckeditor4.5.1配置圖片上傳的方法

        本篇博文主要面向初學(xué)者，一步一步地實(shí)現(xiàn)ckeditor的圖片上傳，歡迎各位大神指正。

        ckeditor的圖片上傳默認(rèn)是關(guān)閉的,網(wǎng)上也有很多相關(guān)的教程，可是不是講的不完整，就是版本太舊已經(jīng)不適用。我寫這篇博文主要面向初學(xué)者，有錯(cuò)誤的地方歡迎指正。

        截止本文撰寫，ckeditor最新版本是4.5.1,我下載的版本是4.5.1standard,如果本文的方法不管用，請下載同一版本嘗試。

1.開啟圖片上傳界面

        文件地址：ckeditor/plugins/p_w_picpath/dialogs/p_w_picpath.js

        搜索"Upload"，將

id:"Upload",hidden:!0

改為

id:"Upload",hidden:false

2.配置上傳圖片表單的傳送地址

        第一種辦法是在ckeditor的config.js里面加入：config.filebrowserUploadUrl = '傳送地址'，這里不推薦使用這種方法，這樣配置不方便，因?yàn)槲覀儽韱蔚膫魉偷刂芬话闶莿?dòng)態(tài)生成，直接在js文件里面寫入靜態(tài)的地址不利于維護(hù)。

        這里采用這種方法，首先打開文件ckeditor/ckeditor.js，把

f=a.config.filebrowserUploadUrl

改為

f=filebrowserUploadUrl

        接著在html頁面引入ckeditor.js之前聲明變量filebrowserUploadUrl并賦值。例如：把

<script type="text/javascript" src="__PUBLIC__/ckeditor/ckeditor.js"></script>

改為

<script type="text/javascript">
    var filebrowserUploadUrl = '傳送地址';
</script>
<script type="text/javascript" src="__PUBLIC__/ckeditor/ckeditor.js"></script>

3.配置：上傳圖片后自動(dòng)加入編輯器中

用firebug查看url文本域和確定按鈕的id：

        這里url文本域的id是：cke_76_textInput，確定按鈕的id是：cke_134_label。（不同版本id不一樣，需要自己查看，再次說明，小編使用的是ckeditor4.5.1_standard,如果是相同版本，可以直接使用本文提供的id）。

        接下來在html頁面加入一段簡單的jquery代碼：

<script type="text/javascript">
function ckeditorUpload(file){
   $('#cke_76_textInput').val(file);
   $('#cke_134_label').click();
}
</script>

        然后在表單處理文件（如php）加入，$file為圖片的url地址

echo '<script>parent.ckeditorUpload("'.$file.'");</script>';

        這里使用parent對象是因?yàn)閏keditor上傳使用的是了一個(gè)空的iframe來實(shí)現(xiàn)異步上傳，所以必須使用parent對象才能操作頁面的DOM。

        成功！上傳圖片成功后自動(dòng)關(guān)閉圖片窗口并把圖片添加到編輯器中。

        如果還有錯(cuò)誤請考慮以下幾個(gè)方面：

1. 傳送地址是否正確

2. 表單處理文件是否成功上傳圖片到服務(wù)器

3. 返回的圖片url是否正確

4. url文本域和確定按鈕的id是否正確

        到此，正文結(jié)束。

        這是本人第一篇博文，雖然還是個(gè)小白，但是據(jù)說寫博文有好處，而且以后需要用的時(shí)候也可以自己看看。歡迎大家指正！