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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)站空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、遂寧網(wǎng)站維護(hù)、網(wǎng)站推廣。

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

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

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頁(yè)面引入ckeditor.js之前聲明變量filebrowserUploadUrl并賦值。例如：把

改為

    var filebrowserUploadUrl = '傳送地址';

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

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

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

        接下來在html頁(yè)面加入一段簡(jiǎn)單的jquery代碼：

function ckeditorUpload(file){
   $('#cke_76_textInput').val(file);
   $('#cke_134_label').click();
}

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

echo '';

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

          

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

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

1. 傳送地址是否正確

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

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

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

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

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

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

分享標(biāo)題：ckeditor4.5.1配置圖片上傳的方法-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://weahome.cn/article/ddgeic.html