CKEditor 4的初始化配置与开启上传功能（JAVA EE）

最新推荐文章于 2024-07-20 11:16:44 发布

阿米尼

最新推荐文章于 2024-07-20 11:16:44 发布

阅读量6.2k

点赞数 4

文章标签： ckeditor java ee 图片开启文件上传

本文链接：https://blog.csdn.net/lyy396/article/details/50509732

版权

配置目标：在JAVA工程项目中配置CKEditor4,同时开启其上传功能，包括图片的上传，超链接的中文件上传（主要用于正文中的附件下载），flash上传。同时不用与CKfinder集成，简单快捷，复用性强。

配置步骤：

第1步：下载CKEditor4

官方网站为：http://ckeditor.com/，后台建议下载FullPackage，功能越多还是比较好些；或者直接将我的附件一（个人已配置好的CKeditor4.5）下载，这样可以省去第3步配置。

第2步：将CKEditor4解压至工程文件中

将压缩包中的ckeditor直接放置到工程的根目录文件，简单的删除samples文件，其他占个空间，个人觉得无所谓。

第3步：在页面中配置CKEditor4编辑器

3.1在页面中加入js引用文件

<script type="text/javascript" src="<%=basePath%>/ckeditor/ckeditor.js"></script>

3.2在表单项中加入标签

<textarea  name="content"  ></textarea>
   <script type="text/javascript">CKEDITOR.replace("content ");</script>

3.3这样CKEditor4编辑器就可呈现出来了

第4步开启CKEditor4 上传功能

在这里我们要打开的是工具栏“图像”、“插入\编辑超链接”、“flash”控件的文件上传功能。

4.1编辑ckeditor文件夹下的

config.js是ckeditor配置文件，各类配置均可在此进行配置，在这里我们就不涉及其他配置了，各位可以在网上自行查找。

4.2在这里我们将开启文件上传功能，修改config.js 文件，内容如下

CKEDITOR.editorConfig = function( config ) {
   //开启工具栏“图像”中文件上传功能，后面的url为待会要上传action要指向的的action或servlet
   config.filebrowserImageUploadUrl= "/rdcms/ckeditorFileUpload_imgUpload.action";
   //开启插入\编辑超链接中文件上传功能，后面的url为待会要上传action要指向的的action或servlet                                                                                                       
   config.filebrowserUploadUrl ='/rdcms/ckeditorFileUpload_fileUpload.action'; 
   //开启flash中文件上传，这里因为不常用，我暂时就不配置了
   //config.filebrowserFlashUploadUrl="";
  
   //工具栏“图像”中预览区域显示内容 
   config.image_previewText=' ';
};

4.3涉及到的相关控件

第5步编写相应的ACTION或Servlet

5.1编写ACTION

因我用的是struts2框架，所以我以action为示例，servlet请自行修改。Action代码示例如下：

package com.cms.action;

import com.opensymphony.xwork2.ActionSupport;

import java.io.File;  
import java.io.IOException;   
import java.io.PrintWriter;  
  

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

import org.apache.struts2.ServletActionContext; 

import tools.Aboutfile;
public class CkeditorFileUploadAction extends ActionSupport{

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private File upload; // 文件  
    private String uploadContentType; // 文件类型  
    private String uploadFileName; // 文件名
    private String uploadImageUrl="userfile/ckEditorUploadImg/";//图像存放路径
    private String uploadFileUrl="userfile/ckEditorUploadFile/";//文件存放路径
    
    /** 
     * 图像中的图片上传 
     *  
     * @return 
     * @throws IOException 
     */  
    public String imgUpload() throws IOException {  
  
        // 获得response,request  
        HttpServletResponse response = ServletActionContext.getResponse();  
        HttpServletRequest request = ServletActionContext.getRequest();  
  
        response.setCharacterEncoding("UTF-8");  
        PrintWriter out = response.getWriter();
        Aboutfile af=new Aboutfile();//引用自己设计的一个工具类
        // CKEditor提交的很重要的一个参数  
        String callback = request.getParameter("CKEditorFuncNum");  
        String expandedName = af.getfileSuffix(uploadFileName); // 文件扩展名  
        if (!af.isPic(expandedName)){ //判断是否是图片 
            out.println("<script type=\"text/javascript\">");  
            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
                    + ",''," + "'文件格式不正确（必须为图片）');");  
            out.println("</script>");  
            return null;  
        }  
        if (upload.length() > (2*1024 * 1024)) {//对图片大小进行限制
            out.println("<script type=\"text/javascript\">");  
            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
                    + ",''," + "'文件大小不得大于2M');");  
            out.println("</script>");  
            return null;  
        }  
  
        
        
        //InputStream is = new FileInputStream(upload);  
        //图片上传路径  
        String uploadPath = ServletActionContext.getServletContext().getRealPath(uploadImageUrl);  
        String fileName = System.currentTimeMillis()+"" ; // 采用时间格式命名  
        fileName +=("."+expandedName);
        String fileLocation=uploadPath+"/"+fileName;
		//上传文件用的是个人工具类上传文件
        int result=af.upFile(upload, fileLocation);
        if(result==1){
        // 返回"图像"选项卡并显示图片 ，返回的是根路径   
        out.println("<script type=\"text/javascript\">");  
        out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
                + ",'" + request.getContextPath() + uploadImageUrl+"/" + fileName + "','')");  
        out.println("</script>");  
        return null; 
        }else{
        	 out.println("<script type=\"text/javascript\">");  
             out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
                     + ",''," + "'文件上传错误');");  
             out.println("</script>");  
             return null; 
        }
    }  
    
    /** 
     * 工具栏“插入\编辑超链接”的文件上传 
     *  
     * @return 
     * @throws IOException 
     */  
    public String fileUpload() throws IOException {  
    	  
        // 获得response,request  
        HttpServletResponse response = ServletActionContext.getResponse();  
        HttpServletRequest request = ServletActionContext.getRequest();  
  
        response.setCharacterEncoding("UTF-8");  
        PrintWriter out = response.getWriter();
        Aboutfile af=new Aboutfile();//引用自己的一个工具类
        // CKEditor提交的很重要的一个参数  
        String callback = request.getParameter("CKEditorFuncNum");  
        String expandedName = af.getfileSuffix(uploadFileName); // 文件扩展名  
        if (!af.isSafe(expandedName)){ //判断是否是安全文件
            out.println("<script type=\"text/javascript\">");  
            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
                    + ",''," + "'文件格式不正确（必须为常用文件）');");  
            out.println("</script>");  
            return null;  
        }  
        if (upload.length() > (50*1024 * 1024)) {//对文件大小进行限制
            out.println("<script type=\"text/javascript\">");  
            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
                    + ",''," + "'文件大小不得大于50M');");  
            out.println("</script>");  
            return null;  
        }  
  
        //文件上传路径  
        String uploadPath = ServletActionContext.getServletContext().getRealPath(uploadFileUrl);  
        String fileName =System.currentTimeMillis()+"" ; // 采用时间格式命名  
        fileName +=("."+expandedName);  
        String fileLocation=uploadPath+"/"+fileName;
		//上传文件用的是个人工具类上传文件
        int result=af.upFile(upload, fileLocation);
        if(result==1){
        // 返回文件上传根路径  
        out.println("<script type=\"text/javascript\">");  
        out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
                + ",'" + request.getContextPath() + uploadFileUrl+"/" + fileName + "','')");  
        out.println("</script>");  
        return null; 
        }else{
        	 out.println("<script type=\"text/javascript\">");  
             out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
                     + ",''," + "'文件上传错误');");  
             out.println("</script>");  
             return null; 
        }
    } 
  
    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;  
    }  
}

5.2导入Aboutfile工具文件（读者可视情况自行修改）

因我上传下载文件比较容易复用，所以我用了一个文件工具类Aboutfile：

package tools;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;



/**
 * 关于一些文件的工具类
 */
public class Aboutfile {

	/**
	 * 判断一个文件是否存在，不存在就创建它 Method execute,只能建最后面那个目录
	 * 
	 * @param String path          
	 * @return null
	 */
	public void creatfile(String path) {
		File file = new File(path);
		if (file.isDirectory()) {
			System.out.println("the   dir   is   exits");
		} else {
			file.mkdir();
			System.out.println(path);
			System.out.println("have   made   a   dir   ！");

		}
	}
	
	/**
	 * 从文件名中得到其后缀名
	 * 
	 * @param String filename         
	 * @return 后缀名
	 */
	public String getfileSuffix(String filename){
		String suffix;
		suffix=filename.substring(
				filename.lastIndexOf(".")+1);
		return suffix;
	}
	
	
	/**
	 * 通过其后缀名判断其是否合法,合法后缀名为常见的
	 * @param String 后缀名       
	 * @return 合法返回true，不合法返回false
	 */
	public boolean isSafe(String suffix){
		suffix=suffix.toLowerCase();
		if(suffix.equals("ppt")||suffix.equals("xls")||suffix.equals("pdf")||suffix.equals("docx")||suffix.equals("doc")||suffix.equals("rar")
				||suffix.equals("zip")||suffix.equals("jpg")||suffix.equals("gif")||suffix.equals("jpeg")
				||suffix.equals("png")||suffix.equals("svg")||suffix.equals("msi")
				||suffix.equals("txt")||suffix.equals("docx")||suffix.equals("pptx")||suffix.equals("xlsx")
				||suffix.equals("rm")||suffix.equals("rmvb")||suffix.equals("wmv")||suffix.equals("mp4")
				||suffix.equals("3gp")||suffix.equals("mkv")||suffix.equals("avi"))
		{
			return true;
		}else{
			
			return false;
		}

	}
	
	/**
	 * 通过其后缀名判断其是否是图片
	 * @param String 后缀名       
	 * @return 合法返回true，不合法返回false
	 */
	public boolean isPic(String suffix){
		suffix=suffix.toLowerCase();
		if(suffix.equals("jpg")||suffix.equals("gif")||suffix.equals("jpeg")||suffix.equals("png"))
		{
			return true;
		}else{
			
			return false;
		}

	}
	

	/**
	    * 进行上传文件的相关操作
	    * @param Formfile file
	 * @throws IOException 
	 * @throws FileNotFoundException 
	 	    */
	public int upFile(File file,String fileLocation) throws FileNotFoundException, IOException{
		BufferedInputStream bis = null;
		BufferedOutputStream bos = null;
		int result=1;
		try{
			FileInputStream fis = new FileInputStream(file);
			FileOutputStream fos = new FileOutputStream(new File(fileLocation));
			bis = new BufferedInputStream(fis);
			bos = new BufferedOutputStream(fos);
		
				int bytesRead = 0;
				byte[] buffer = new byte[1024];
				while ((bytesRead = bis.read(buffer)) != -1) {
					bos.write(buffer, 0, bytesRead);
					}
			try{
				try{
					if(null!=bis){
						bis.close();
						bis=null;
					}
				}catch(IOException e){
					e.printStackTrace();
					result=0;
				}
				try{
					if(null!=bos){
						bos.close();
						bos=null;
					}
					}catch(IOException e){
						e.printStackTrace();
						result=0;
					}
				fis.close();
				fos.close();	
			}catch(Exception ex){
				ex.printStackTrace();	
				result=0;
			}
		}catch(Exception e){
		e.printStackTrace();
		result=0;
		}finally{
			try{
				if(null!=bis){
					bis.close();
				}
			}catch(IOException e){
				e.printStackTrace();
				result=0;
				
			}
			try{
				if(null!=bos){
					bos.close();
				}
				}catch(IOException e){
					e.printStackTrace();
					result=0;
					
				}
				return result;
			}
		
	}
    
	
	/**
	 * 计算文件大小，将long类型转换为String类型
	 * @param filesize
	 * @return
	 */
	public String getFileStringSize(long filesize) {
		//size不能为0？
		double temp = 0.0;
		String ssize = "";
		temp=(double)filesize/1024;
		if(temp>=1024){
			temp = (double)temp/1024;
			if (temp>=1024) {
				temp = (double)temp/1024;
				ssize = temp+"000";
				ssize = ssize.substring(0,ssize.indexOf(".")+3)+"GB";
			} else {
				ssize = temp+"000";
				ssize=ssize.substring(0,ssize.indexOf(".")+3)+"MB";
			}
		}else {
			ssize = temp+"000";
			ssize=ssize.substring(0,ssize.indexOf(".")+3)+"KB";
		}
		return ssize;
	}
	

	
}

第6步大功告成