ckeditor作為老牌的優秀線上編輯器，一直受到開發者的青睞。

這裡我們講解下 ckeditor最新版本4.7的圖片上傳配置。

我們下載完整版

預設本地上傳沒有開啟；

找到ckeditor/plugins/image/dialogs/image.js檔案 開啟 

然後搜尋 id:"Upload",hidden   預設值是!0 我們改成0即可

重新整理頁面，點選那個上傳圖片圖示，

出現了上傳；

然後我們配置下上傳後臺請求路徑

找到ckeditor下的config.js 開啟

config.filebrowserUploadUrl="/admin/film/ckeditorUpload";

配置下  

後臺處理有個callback引數CKEditorFuncNum我們要接收下 並且要返回

在前臺頁面中引入

“<script type="text/javascript" src="/static/ckeditor/ckeditor.js"></script>” 

<tr>
    <td valign="top">內容：</td>
    <td><textarea id="content" name="content" rows="30" cols="80"></textarea></td>
</tr>
<script type="text/javascript">
CKEDITOR.replace("content");
</script>
 

這裡我專案裡的參考實現 用的是springboot

/**

 * 上傳圖片

 * @param file

 * @return

 */

@ResponseBody

@RequestMapping("/ckeditorUpload")

public String ckeditorUpload(@RequestParam("upload")MultipartFile file,String CKEditorFuncNum)throws Exception{

    // 獲取檔名

    String fileName = file.getOriginalFilename();

    // 獲取檔案的字尾名

    String suffixName = fileName.substring(fileName.lastIndexOf("."));

    String newFileName=DateUtil.getCurrentDateStr()+suffixName;

    FileUtils.copyInputStreamToFile(file.getInputStream(), new File(imageFilePath+newFileName));

    StringBuffer sb=new StringBuffer();

    sb.append("<script type=\"text/javascript\">");

    sb.append("window.parent.CKEDITOR.tools.callFunction("+ CKEditorFuncNum + ",'" +"/static/filmImage/"+ newFileName + "','')");

    sb.append("</script>");

    return sb.toString();

}
 

獲取檔案，重新命名，搞到本地 然後返回ajax資訊。