1. 程式人生 > >4.CKeditor4.10.0最新圖片上傳配置

4.CKeditor4.10.0最新圖片上傳配置

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());