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

配置目标：在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(" +
aa6e
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步大功告成