CKeditor4.9.2最新圖片上傳配置
阿新 • • 發佈:2019-01-28
最近在弄CKeditor富文字編輯器,到上傳圖片的配置這一步時,發現網上的教程都不適合我現在的版本,於是決定自己上官網看相關的文件,好在有瀏覽器幫我自動翻譯了網頁,很快我便找到了圖片上傳的配置,下面是相關教程。
第一步:下載CKeditor(這不廢話嗎?),本文針對的版本是CKeditor-4.9.2,其他版本沒有試過。
第二步:解壓下載好的壓縮包,放到自己的應用目錄下,在config.js的CKEDITOR.editorConfig = function( config ) {}中加入如下全域性配置:
/*將編輯器的語言設定為中文*/ config.language = 'zh-cn'; /*去掉圖片預覽框的文字*/ config.image_previewText = ' '; /*開啟工具欄“影象”中檔案上傳功能,後面的url為圖片上傳要指向的的action或servlet*/ config.filebrowserImageUploadUrl= "/blog/uploadEditorImage";
第三步:在要使用CKeditor的html中引入如下js
<script src="ckeditor-4.9.2/ckeditor.js" type="text/javascript" charset="utf-8"></script>
<script src="ckeditor-4.9.2/config.js" type="text/javascript" charset="utf-8"></script>
第四步:在html中使用CKeditor
<textarea id="content">Hello World</textarea> <script type="text/javascript"> CKEDITOR.replace('content',{ removePlugins:'elementspath,resize', codeSnippet_theme: 'zenburn', height:'300' }); </script>
第五步:伺服器端(Java)上傳圖片配置,這裡要特別注意,此版本的CKeditor在圖片上傳成功後不再使用window.parent.CKEDITOR.tools.callFunction了,而是返回一個json字串物件:
上傳成功時,返回:
{
"uploaded":1,
"fileName":"圖片名稱",
"url":"圖片訪問路徑"
}
上傳失敗時,返回
{
"uploaded":0,
"error":{
"message":"失敗原因"
}
}
以下伺服器端的完整程式碼
@RequestMapping("/uploadEditorImage")
public void uploadEditorImage(HttpServletResponse response, HttpServletRequest request,@RequestParam("upload")MultipartFile file) {
PrintWriter out = null;
String imageUrl = "";
String msg = "";
String fileName = "";
JSONObject result = new JSONObject();
try {
out = response.getWriter();
String imagesViewUrlPrefix = CommonResource.get("imagesViewUrlPrefix");
String fileType = FileUtil.getFileSuffixFromContentType(file.getContentType());
fileName = UUIDFactory.getUUID() + "." + fileType;
BaseResult uploadResult = FileUtil.uploadFile(fileName, file.getInputStream());
if(uploadResult.getCode() == ResultType.CODE_NORMAL) {
String imagePath = (String) uploadResult.getData();
imageUrl = imagesViewUrlPrefix + imagePath;
}else {
msg = "檔案上傳失敗";
}
} catch (Exception e) {
e.printStackTrace();
logger.error("富文字編輯器上傳圖片時發生異常", e);
msg = "伺服器異常";
} finally {
if(!StringUtil.isNullOrEmpty(msg)) {
//上傳失敗
result.put("uploaded", 0);
JSONObject errorObj = new JSONObject();
errorObj.put("message", msg);
result.put("error", errorObj);
}else {
//上傳成功
result.put("uploaded", 1);
result.put("fileName", fileName);
result.put("url", imageUrl);
}
out.println(result.toJSONString());
}