CKEditor 4的初始化配置與開啟上傳功能（JAVA EE）
阿新 • • 發佈：2018-11-19
配置目標
在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步大功告成
---------------------
作者：阿米尼
來源：CSDN
原文：https://blog.csdn.net/lyy396/article/details/50509732