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

        本篇博文主要面向初學者，一步一步地實現ckeditor的圖片上傳，歡迎各位大神指正。

        ckeditor的圖片上傳默認是關閉的,網上也有很多相關的教程，可是不是講的不完整，就是版本太舊已經不適用。我寫這篇博文主要面向初學者，有錯誤的地方歡迎指正。

        截止本文撰寫，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 = '傳送地址'，這里不推薦使用這種方法，這樣配置不方便，因為我們表單的傳送地址一般是動態生成，直接在js文件里面寫入靜態的地址不利于維護。

        這里采用這種方法，首先打開文件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.配置：上傳圖片后自動加入編輯器中

用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對象是因為ckeditor上傳使用的是了一個空的iframe來實現異步上傳，所以必須使用parent對象才能操作頁面的DOM。

        成功！上傳圖片成功后自動關閉圖片窗口并把圖片添加到編輯器中。

        如果還有錯誤請考慮以下幾個方面：

1. 傳送地址是否正確

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

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

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

        到此，正文結束。

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