CKEditor结合struts实现图片上传

本人用的 CKEditor版本为4.4.7  CKEditor 配置和部署

CKEditor编辑器的工具栏中初始的时候，默认情况下是禁止上传的，所以没有图片上传按钮

实现图片上传：

第一步：

在ckeditor\plugins\image\dialogs\image.js里面Ctrl+f(我用的是myeclipse 查找功能) 查找 Upload  (   id:"Upload",hidden:!0,) 这里把0改成1；就能显示上传了。

第二步：

打开config.js文件，加入下面一句话config.image_previewText=' '; //预览区域显示内容

第三步：

下面研究图片上传

打开config.js文件，加入下面一句话

config.filebrowserImageUploadUrl= "imageupload(自己定义的名字，但和struts里的action里的名字一样)"; //待会要上传的action或servlet

OK现在基本上是下面这个样子的了

第四步：

接下来就是action中的上传方法：

package action;
import java.io.File;  
import java.io.FileInputStream;  
import java.io.FileOutputStream;  
import java.io.InputStream;  
import java.io.OutputStream;  
import java.io.PrintWriter;  
  
import javax.servlet.http.HttpServletResponse;  
  
import org.apache.struts2.ServletActionContext;  
  
import com.opensymphony.xwork2.ActionSupport;  
  
public class images extends ActionSupport {  
  
    private File upload;  
    private String uploadContentType;  
    private String uploadFileName;  
  
    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;  
    }  
  
    public String execute() throws Exception {  
          
        HttpServletResponse response = 
ServletActionContext.getResponse();  
        response.setCharacterEncoding("GBK");  
        PrintWriter out = response.getWriter();  
  
        // CKEditor提交的很重要的一个参数  
        String callback = 
ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
  
  
        String expandedName = ""; // 文件扩展名  
        if (uploadContentType.equals("image/pjpeg") ||
 uploadContentType.equals("image/jpeg")) {  
            // 
IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg 
 
            expandedName = ".jpg";  
        } else if 
(uploadContentType.equals("image/png") || 
uploadContentType.equals("image/x-png")) {  
            // 
IE6上传的png图片的headimageContentType是"image/x-png"  
            expandedName = ".png";  
        } else if 
(uploadContentType.equals("image/gif")) {  
            expandedName = ".gif";  
        } else if 
(uploadContentType.equals("image/bmp")) {  
            expandedName = ".bmp";  
        } else {  
            out.println("");  
            return null;  
        }  
  
        if (upload.length() > 600 * 1024) {  
            out.println("");  
            return null;  
        }  
  
        InputStream is = new FileInputStream(upload);  
        //默认图片保存在tomcat下，这里可以进行更改
        String uploadPath = 
ServletActionContext.getServletContext().getRealPath("/");
  
        String fileName = java.util.UUID.randomUUID().toString(); // 
采用UUID的方式命名保证不会重复  
        fileName += expandedName;  
        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);  
        }  
        is.close();  
        os.close();  
  
        // 返回“图像”选项卡并显示图片  
        out.println("");  
        return null;  
    }  
}  

第四步：struts里面添加代码

		imageupload" 
class="action.images">
			/index.jsp
		

	

最后上传图片成功

config.js里面的代码

/**
 * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All 
rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */
    CKEDITOR.editorConfig = function( config ) {        
    };  
CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.image_previewText=' '; 
//预览区域显示内容
	config.filebrowserImageUploadUrl= "imageupload"; 
//要上传的action或servlet   

};