4.CKeditor4.10.0最新圖片上傳配置
阿新 • • 發佈:2018-12-07
CKeditor-4.10.0富文字編輯器,到上傳圖片的配置,網上的教程都不適合現在的版本。
第一步:在config.js的CKEDITOR.editorConfig = function( config ) {}中加入如下全域性配置:
config.language = 'zh-cn';/*將編輯器的語言設定為中文*/ config.image_previewText = ' ';/*去掉圖片預覽框的文字*/ /*開啟工具欄“影象”中檔案上傳功能,後面的url為圖片上傳要指向的的action或servlet*/ config.filebrowserImageUploadUrl= "/blog/uploadEditorImage";
第二步:為了提高可擴充套件性,也可在引入CKeditor的頁面配置
var editor = CKEDITOR.replace('pcContent',{
filebrowserImageUploadUrl : '${rc.contextPath}/upload/${systemId}/article/image_upload.htm?id=${articleId!}'+'&useScene='+useScenePc,
language : 'zh-cn',
…………其他屬性略
});
第三步:在要使用CKeditor的html中引入如下js
<script src="${rc.contextPath}/htdocs/plugins/ckeditor/ckeditor.js"></script>
第四步:伺服器端(Java)上傳圖片配置,這裡要特別注意,此版本的CKeditor在圖片上傳成功後不再使用window.parent.CKEDITOR.tools.callFunction了,而是返回一個json字串物件:
上傳成功時,返回:
{
"uploaded":1,
"fileName":"圖片名稱",
"url":"圖片訪問路徑"
}
上傳失敗時,返回
{
"uploaded":0,
"error":{
"message":"失敗原因"
}
}
以下伺服器端的完整程式碼
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());