CKeditor4.92+Struts2實現圖片上傳和顯示

①在ckeditor官網下載zip  https://ckeditor.com/   博主的版本是4.9.2的。

②修改ckeditor目錄下的config.js文件

/**
 * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

CKEDITOR.editorConfig = function( config ) {
    config.removePlugins = 'elementspath';
    config.enterMode = CKEDITOR.ENTER_BR;
    config.shiftEnterMode = CKEDITOR.ENTER_P;
    /*將編輯器的語言設置爲中文*/
    config.language = 'zh-cn';
    /*隱藏超鏈接與高級選項*/
    config.removeDialogTabs = 'image:advanced;image:Link';

    
    /*開啓工具欄“圖像”中文件上傳功能,後面的url爲圖片上傳要指向的的action或servlet*/
    config.filebrowserImageUploadUrl= "ckeditorUpload.action";

    config.toolbar = 'MyToolbar';
     
    config.toolbar_MyToolbar =
    [
        { name: 'document', items : [ 'DocProps','Templates' ] },
    { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
    { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
    
    '/',
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','-','RemoveFormat' ] },
    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-',
    '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
    { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
    { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar' ] },
    '/',
    { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
    { name: 'colors', items : [ 'TextColor','BGColor' ] },
    { name: 'tools', items : [ 'Maximize' ] }
    ];
    config.font_names = '宋體/SimSun;新宋體/NSimSun;仿宋/FangSong;楷體/KaiTi;仿宋_GB2312/FangSong_GB2312;'+  
    '楷體_GB2312/KaiTi_GB2312;黑體/SimHei;華文細黑/STXihei;華文楷體/STKaiti;華文宋體/STSong;華文中宋/STZhongsong;'+  
    '華文仿宋/STFangsong;華文彩雲/STCaiyun;華文琥珀/STHupo;華文隸書/STLiti;華文行楷/STXingkai;華文新魏/STXinwei;'+  
    '方正舒體/FZShuTi;方正姚體/FZYaoti;細明體/MingLiU;新細明體/PMingLiU;微軟雅黑/Microsoft YaHei;微軟正黑/Microsoft JhengHei;'+  
    'Arial Black/Arial Black;'+ config.font_names;  
};
③創建Strut2 圖片上傳處理action。注意ckeditor4.5以後圖片處理結果直接返回json數據了。成功的話需要返回uploaded=1,fileName,url三個信息。失敗的話返回:uploaded=0和錯誤信息提示message兩個字段。圖片上傳類參考了網上網友的代碼。json數據封裝用了阿里巴巴的fastjson

package com.fxzgy.ckeditor;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.alibaba.fastjson.JSONObject;
import com.fxzgy.util.DateUtil;
import com.opensymphony.xwork2.ActionSupport;

/**
 *
 * @ClassName: CkeditorUpload
 * @Description: ckeditor圖片上傳
 * @author YuJianyou
 * @date 2018年8月4日 下午6:42:24
 *
 */
public class CkeditorUpload extends ActionSupport {
    /**
     * @Fields serialVersionUID : TODO
     */
    private static final long serialVersionUID = 1L;
    // 文件
    private File upload;
    // 類型
    private String uploadContentType;
    // 文件名
    private String uploadFileName;

    @Override
    public String execute() throws IOException {
        // 獲取服務器根路徑
        HttpServletRequest request = ServletActionContext.getRequest();
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("UTF-8");
        String msg = "";
        PrintWriter out = response.getWriter();

        JSONObject result = new JSONObject();
        String expandedName = ""; // 文件擴展名
        if (uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) {
            expandedName = ".jpg";
        } else if (uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")) {
            expandedName = ".png";
        } else if (uploadContentType.equals("image/gif")) {
            expandedName = ".gif";
        } else if (uploadContentType.equals("image/bmp")) {
            expandedName = ".bmp";
        } else {
            msg = "文件格式不正確(必須爲.jpg/.gif/.bmp/.png文件)!";
            result.put("uploaded", 0);
            JSONObject errorObj = new JSONObject();
            errorObj.put("message", msg);
            result.put("error", errorObj);
            out.println(result.toJSONString());
            return null;
        }

        if (upload.length() > 1024 * 1024 * 2) {
            msg = "文件大小不得大於2M!";
            result.put("uploaded", 0);
            JSONObject errorObj = new JSONObject();
            errorObj.put("message", msg);
            result.put("error", errorObj);
            out.println(result.toJSONString());
            return null;
        }

        InputStream is = new FileInputStream(upload);
        String uploadPath = request.getSession().getServletContext().getRealPath("ckeditorImg" + DateUtil.getDirDate());
        File dirfile = new File(uploadPath);
        if (!dirfile.exists()) {
            dirfile.mkdirs();
        }

        String fileName = DateUtil.getDate() + expandedName; // 採用時間+UUID的方式隨即命名
        File toFile = new File(uploadPath, fileName);
        OutputStream os = new FileOutputStream(toFile);
        byte[] buffer = new byte[1024];
        int length = 0;
        while ((length = is.read(buffer)) > 0) {
            os.write(buffer, 0, length);
        }
        // 圖片Url
        String imageUrl = request.getContextPath() + "/" + "ckeditorImg" + DateUtil.getDirDate() + "/" + fileName;
        result.put("uploaded", 1);
        result.put("fileName", fileName);
        result.put("url", imageUrl);
        out.println(result.toJSONString());

        is.close();
        os.close();
        return null;
    }

    /* get-------set ------------------ */
    public File getUpload() {
        return upload;
    }

    public void setUpload(File upload) {

        this.upload = upload;
    }

    public String getUploadContentType() {
        return uploadContentType;
    }

    public void setUploadContentType(String uploadContentType) {
        this.uploadContentType = uploadContentType;
    }

    public String getUploadFileName() {
        return uploadFileName;
    }

    public void setUploadFileName(String uploadFileName) {
        this.uploadFileName = uploadFileName;
    }
}

DateUtil.java

package com.fxzgy.util;

import java.util.Calendar;

public class DateUtil {
    public static String getDate() {
        Calendar calendar = Calendar.getInstance();
        int y = calendar.get(Calendar.YEAR);
        int m = calendar.get(Calendar.MONTH);
        int d = calendar.get(Calendar.DATE);
        int h = calendar.get(Calendar.HOUR);
        int mi = calendar.get(Calendar.MINUTE);
        int s = calendar.get(Calendar.SECOND);
        StringBuffer sb = new StringBuffer("");
        sb.append(y);
        sb.append(m + 1);
        sb.append(d);
        sb.append(h);
        sb.append(mi);
        sb.append(s);
        String date = sb.toString();
        return date;
    }

    public static String getDirDate() {
        Calendar calendar = Calendar.getInstance();
        int y = calendar.get(Calendar.YEAR);
        int m = calendar.get(Calendar.MONTH);
        int d = calendar.get(Calendar.DATE);
        StringBuffer sb = new StringBuffer("");
        sb.append(y);
        sb.append(m + 1);
        sb.append(d);
        String date = sb.toString();
        return date;
    }

}
struts.xml

<action name="ckeditorUpload" class="com.fxzgy.ckeditor.CkeditorUpload" >
        </action>

記錄一下困擾了已久的問題,希望能幫助你們。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章