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


        

记录一下困扰了已久的问题,希望能帮助你们。

你可能感兴趣的:(CKeditor4.92+Struts2实现图片上传和显示)