JAVA+Ckeditor开发。CKEditor二次开发—-为CKEditor增加上传图片的功能
文章分类:Java编程这是我做的一个个人知识管理的一部分，现在把这部分提取出来，加上原代码，
希望对大家学习工作有一定的的参考价值。
我对JAVA情有独钟，可惜，原本可以用CKFinder来完成图片上传的功能，可是呢
，CKFinder不支持java,所以我只能自己对
CKEditor动一下手。其实原理也很简
单，只是把原来可以配置为上传的那个页面换成我们自己开发的上传页面。在这
里，使用了Action来实现图片的上传，对不需要Action或对Action不懂的朋友，
可以使用Servlet来代替那部分的功能，在此，我不就不多说了。
首先，修改对CKEditor引入的那部分javascript，代码如下:
Js代码
<script
type=”text/javascript”>
CKEDITOR.replace(‘content’,addUploadButton(this));
function
addUploadButton(editor){
CKEDITOR.on(‘dialogDefinition’,
function( ev ){
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == ‘image’ ){
var
infoTab = dialogDefinition.getContents( ‘info’
);
infoTab.add({
type :
‘button’,
id : ‘upload_image’,
align : ‘center’,
label
: ‘上传图片’,
onClick : function( evt ){
var thisDialog = this.getDialog();
var txtUrlObj =
thisDialog.getContentElement(‘info’, ‘txtUrl’);
var txtUrlId =
txtUrlObj.getInputElement
().$.id;
addUploadImage(txtUrlId);
}
}, ‘browse’); //place front of the browser button
}
});
}
function
addUploadImage(theURLElementId){
var uploadUrl =
“myCkeditor/uploadImage.jsp”; //这是我自己的
处理文件/图片上传的页面URL
var imgUrl =
window.showModalDialog
(uploadUrl,null,”dialogWidth:360px;dialogHeight:120px;help:no;status:no
“);
var urlObj = document.getElementById(theURLElementId);
urlObj.value = imgUrl;
//alert(imgUrl);
urlObj.fireEvent(“onchange”);
//触发url文本框的onchange事件
，以便预览图片
}
</script>
<script
type=”text/javascript”>
CKEDITOR.replace(‘content’,addUploadButton(this));
function addUploadButton(editor){
CKEDITOR.on(‘dialogDefinition’,
function( ev ){
var dialogName =
ev.data.name;
var dialogDefinition =
ev.data.definition;
if ( dialogName == ‘image’
){
var infoTab = dialogDefinition.getContents( ‘info’
);
infoTab.add({
type :
‘button’,
id :
‘upload_image’,
align :
‘center’,
label : ‘上传图片’,
onClick : function( evt ){
var thisDialog =
this.getDialog();
var txtUrlObj =
thisDialog.getContentElement(‘info’,
‘txtUrl’);
var txtUrlId =
txtUrlObj.getInputElement
().$.id;
addUploadImage(txtUrlId);
}
},
‘browse’); //place front of the browser button
}
});
}
function
addUploadImage(theURLElementId){
var uploadUrl =
“myCkeditor/uploadImage.jsp”; //这是我自己的
处理文件/图片上传的页面URL
var
imgUrl =
window.showModalDialog
(uploadUrl,null,”dialogWidth:360px;dialogHeight:120px;help:no;status:no
“);
var urlObj = document.getElementById(theURLElementId);
urlObj.value = imgUrl;
//alert(imgUrl);
urlObj.fireEvent(“onchange”); //触发url文本框的onchange事件
，以便预览图片
}
</script>
完成这个以后，我们可以做一个上传页面，如上代码
“myCkeditor/uploadImage.jsp”;
//这是我自己的处理文件/图片上传的页面URL
Html代码
<%@ page language=”java”
import=”java.util.*” pageEncoding=”GBK”%>
<%@taglib uri=”/struts-tags”
prefix=”s”%>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Transitional//EN”>
<html>
<head>
<title>上传</title>
</head>
<body>
<iframe name=”smz” width=”0″ height=”0″
frameborder=”0″
style=”display:
none”></iframe>
<font color=”red”><s:property
value=”#request.errorMessage”
/></font>
<form
action=”imageUpload” method=”post”
enctype=”multipart/form-data”
name=”UploadPhoto”
target=”smz”>
<input type=”file” name=”file” id=”file”
class=”button”>
<input type=”hidden” name=”type” id=”type”
value=”.jpg”>
<input onClick=”Submit()” type=”submit”
name=”submit”
value=”上传”>
</form>
<input type=”hidden” name=”pagePath”
id=”_page_path”
value=”<%String
p=(String)session.getAttribute
(“pagePath”);if(p!=null)out.print(p);session.removeAttribute
(“pagePath”);
%>” />
<script type=”text/javascript”>
var _page_path = document.getElementById(“_page_path”).value;
if(null!=_page_path && “”!=_page_path){
window.returnValue=_page_path;
window.close();
}
function Submit()
{
document.getElementById
(‘type’).value=document.getElementById(‘file’).value;
}
</script>
</body>
</html>
<%@ page language=”java”
import=”java.util.*” pageEncoding=”GBK”%>
<%@taglib uri=”/struts-tags”
prefix=”s”%>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Transitional//EN”>
<html>
<head>
<title>上传</title>
</head>
<body>
<iframe
name=”smz” width=”0″ height=”0″ frameborder=”0″
style=”display:
none”></iframe>
<font color=”red”><s:property
value=”#request.errorMessage”
/></font>
<form
action=”imageUpload” method=”post” enctype=”multipart/form-
data”
name=”UploadPhoto” target=”smz”>
<input type=”file” name=”file”
id=”file”>
<input type=”hidden” name=”type”
id=”type” value=”.jpg”>
<input onClick=”Submit()” type=”submit”
name=”submit” value=”上传”
class=”button”>
</form>
<input type=”hidden” name=”pagePath” id=”_page_path”
value=”<%String
p=(String)session.getAttribute(“pagePath”);if(p!
=null)out.print(p);session.removeAttribute(“pagePath”);
%>” />
<script type=”text/javascript”>
var _page_path
= document.getElementById(“_page_path”).value;
if(null!=_page_path
&& “”!=_page_path){
window.returnValue=_page_path;
window.close();
}
function Submit()
{
document.getElementById(‘type’).value=document.getElementById
(‘file’).value;
}
</script>
</body>
</html>
再接下来，我们就要做Action,即如上所示的<form
action=”imageUpload”
method=”post”
enctype=”multipart/form-data”
Html代码
name=”UploadPhoto”
target=”smz”>
name=”UploadPhoto”
target=”smz”>
，好了我们继续，
Java代码
package
com.burning.EasyCMS.myCkeditor;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import
java.io.FileInputStream;
import java.io.FileOutputStream;
import
java.io.InputStream;
import java.io.OutputStream;
import
java.util.Date;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import
org.apache.struts2.ServletActionContext;
public class FileUpload {
private static final long serialVersionUID = 572146812454l;
private static final int BUFFER_SIZE = 16 * 1024;
private File
file;
private String type;
private String pagePath;
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public File getFile() {
return file;
}
public void setFile(File file) {
this.file
= file;
}
private static void copy(File src, File dst) {
try {
InputStream in = null;
OutputStream out = null;
try {
in = new BufferedInputStream(new FileInputStream(src),
BUFFER_SIZE);
out = new BufferedOutputStream(new
FileOutputStream
(dst),
BUFFER_SIZE);
byte[] buffer = new byte[BUFFER_SIZE];
while (in.read(buffer) > 0) {
out.write(buffer);
}
} finally {
if
(null != in) {
in.close();
}
if (null != out) {
out.close();
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
public String imageUpload() {
HttpServletRequest request =
ServletActionContext.getRequest();
HttpSession
session=request.getSession();
try{
String fileName
= new Date().getTime()+ type.substring
(type.length() – 4,
type.length());
String path =
ServletActionContext.getServletContext
().getRealPath(“\\”)+
“upload\\image\\”;
File imageFile = new File(path + fileName);
pagePath = “upload\\image\\” + fileName;
session.setAttribute(“pagePath”, pagePath);
copy(file,
imageFile);
//System.out.println(“file:”+file.getName());
//System.out.println(“file:”+file.);
return
“imageUploadSuccess”;
}
catch(Exception e )
{
request.setAttribute(“errorMessage”, “图片上传未成功”);
return “imageUploadFail”;
}
}
}
package com.burning.EasyCMS.myCkeditor;
import
java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import
java.io.File;
import java.io.FileInputStream;
import
java.io.FileOutputStream;
import java.io.InputStream;
import
java.io.OutputStream;
import java.util.Date;
import
javax.servlet.http.HttpServletRequest;
import
javax.servlet.http.HttpSession;
import
org.apache.struts2.ServletActionContext;
public class FileUpload
{
private static final long serialVersionUID = 572146812454l;
private
static final int BUFFER_SIZE = 16 * 1024;
private File file;
private
String type;
private String pagePath;
public String getType() {
return type;
}
public void setType(String type) {
this.type =
type;
}
public File getFile() {
return file;
}
public
void setFile(File file) {
this.file = file;
}
private static
void copy(File src, File dst) {
try {
InputStream in = null;
OutputStream out = null;
try {
in = new BufferedInputStream(new
FileInputStream(src),
BUFFER_SIZE);
out = new
BufferedOutputStream(new FileOutputStream(dst),
BUFFER_SIZE);
byte[] buffer = new byte[BUFFER_SIZE];
while (in.read(buffer) > 0)
{
out.write(buffer);
}
} finally {
if (null !=
in) {
in.close();
}
if (null != out) {
out.close();
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
public String imageUpload() {
HttpServletRequest request = ServletActionContext.getRequest();
HttpSession session=request.getSession();
try{
String fileName =
new Date().getTime()+ type.substring(type.length
() – 4,
type.length());
String path =
ServletActionContext.getServletContext().getRealPath
(“\\”)+
“upload\\image\\”;
File imageFile = new File(path + fileName);
pagePath = “upload\\image\\” + fileName;
session.setAttribute(“pagePath”,
pagePath);
copy(file, imageFile);
//System.out.println(“file:”+file.getName());
//System.out.println(“file:”+file.);
return “imageUploadSuccess”;
}
catch(Exception e )
{
request.setAttribute(“errorMessage”,
“图片上传未成功”);
return “imageUploadFail”;
}
}
}
接下来就是对struts.xml的配置了
Xml代码
<action
name=”imageUpload”
class=”com.burning.EasyCMS.myCkeditor.FileUpload”
method=”imageUpload”>
<result
name=”imageUploadSuccess”>
/myCkeditor/uploadImage.jsp
</result>
<result
name=”imageUploadFail”>
/myCkeditor/uploadImage.jsp
</result>
</action>
<action
name=”imageUpload”
class=”com.burning.EasyCMS.myCkeditor.FileUpload”
method=”imageUpload”>
<result name=”imageUploadSuccess”>
/myCkeditor/uploadImage.jsp
</result>
<result
name=”imageUploadFail”>
/myCkeditor/uploadImage.jsp
</result>
</action>
好了，，到此，功能就增加完毕了，为了完成这个功能，我也参考了网上很多资
料，，
谢谢大家