标签：

应用环境：struts2，jsp。IE8下测试通过。

kindeditor版本为3.5.4，官网下载后解压，取plugins、skins文件夹和kindeditor.js置于Web工程的WebRoot下。本文仅简单介绍如何使用kindeditor，并实现图片上传功能，页面上的提交功能未予实现。

先来看页面

[java] view plaincopy

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

kindeditor测试页面

KE.show({

id:‘content‘,   //下面的textarea的ID

height:‘500px‘,

resizeMode:0,

skinType:‘default‘,

autoOnsubmitMode:‘true‘,

//items选项可以去掉你不想要的功能，比如此处去掉上传flash的功能。没有这一项则默认开启所有功能

items : [

‘source‘, ‘|‘, ‘fullscreen‘, ‘undo‘, ‘redo‘, ‘print‘, ‘cut‘, ‘copy‘, ‘paste‘,

‘plainpaste‘, ‘wordpaste‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘,

‘justifyfull‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘indent‘, ‘outdent‘, ‘subscript‘,

‘superscript‘, ‘|‘, ‘selectall‘, ‘-‘,

‘title‘, ‘fontname‘, ‘fontsize‘, ‘|‘, ‘textcolor‘, ‘bgcolor‘, ‘bold‘,

‘italic‘, ‘underline‘, ‘strikethrough‘, ‘removeformat‘, ‘|‘, ‘image‘,

‘advtable‘, ‘hr‘, ‘emoticons‘, ‘link‘, ‘unlink‘, ‘|‘, ‘about‘

],

imageUploadJson:‘${pageContext.request.contextPath}/component/kindeditor/uploadImage.do‘

});

kindeditor测试页面

(提交快捷键: Ctrl + Enter)

后台程序的处理

[java] view plaincopy

package org.wusq.ssx.component.kindeditor;

import java.io.File;

import java.io.FileNotFoundException;

import java.io.IOException;

import java.io.PrintWriter;

import java.io.UnsupportedEncodingException;

import java.util.Date;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper;

import org.springframework.stereotype.Controller;

import org.wusq.ssx.util.ImageUtils;

import com.opensymphony.xwork2.ActionSupport;

/**

* KindEditor测试类

* @author wusq

* @since 2011-05-05

*/

@Controller

public class KindEditor extends ActionSupport{

private static final long serialVersionUID = 6624518147834729694L;

//图片对象

private File imgFile;

//图片宽度

private String imgWidth;

//图片高度

private String imgHeight;

//图片对齐方式

private String align;

//图片标题

private String imgTitle;

public String uploadImage() throws Exception{

MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) ServletActionContext.getRequest();

//获得图片名字

String imgName = wrapper.getFileNames("imgFile")[0];

//获得图片后缀名

String fileExt = imgName.substring(imgName.lastIndexOf(".")).toLowerCase();

//重新生成图片名字

String imgN = new Date().getTime() + fileExt;

//图片在服务器上的绝对路径。编辑器并没有提供删除图片功能，此路径以后可以用于后台程序对图片的操作

String serverPath = "D://Program Files//Apache Software Foundation//Tomcat 6.0//webapps//ssx//uploadimage//";

//页面的引用地址

String savePath = "http://127.0.0.1:8080/ssx/uploadimage/";

//实际应用中鉴于地址的可变性，此处的两个path可以动态生成或从配置文件读取

kEUploadImage(ServletActionContext.getRequest(), ServletActionContext.getResponse(), imgFile, imgTitle, imgWidth, imgHeight, imgN, savePath, serverPath);

return null;

}

void kEUploadImage(HttpServletRequest request, HttpServletResponse response, File imgFile, String imgTitle, String imgWidth, String imgHeight, String imgName, String savePath, String serverPath)

throws FileNotFoundException, IOException{

//将图片写入服务器

ImageUtils.uploadToServer(imgFile, serverPath, imgName);

//页面回显

String id = "content";

String url = savePath + imgName;

String border = "0";

String result ="

parent.KE.plugin[/"image/"].insert(/""

+ id

+ "/",/""

+ url

+ "/",/""

+ imgTitle

+ "/",/""

+ imgWidth

+ "/",/""

+ imgHeight

+ "/",/""

+ border + "/""

+");

// -->";

PrintWriter out = null;

out = encodehead(request, response);

out.write(result);

out.close();

}

PrintWriter encodehead(HttpServletRequest request,HttpServletResponse response){

try {

request.setCharacterEncoding("utf-8");

response.setContentType("text/html; charset=utf-8");

return response.getWriter();

} catch (UnsupportedEncodingException e) {

e.printStackTrace();

return null;

} catch (IOException e) {

e.printStackTrace();

return null;

}

}

public File getImgFile() {

return imgFile;

}

public void setImgFile(File imgFile) {

this.imgFile = imgFile;

}

public String getImgWidth() {

return imgWidth;

}

public void setImgWidth(String imgWidth) {

this.imgWidth = imgWidth;

}

public String getImgHeight() {

return imgHeight;

}

public void setImgHeight(String imgHeight) {

this.imgHeight = imgHeight;

}

public String getAlign() {

return align;

}

public void setAlign(String align) {

this.align = align;

}

public String getImgTitle() {

return imgTitle;

}

public void setImgTitle(String imgTitle) {

this.imgTitle = imgTitle;

}

}

引用的工具类

[java] view plaincopy

package org.wusq.ssx.util;

import java.io.File;

import java.io.FileInputStream;

import java.io.FileNotFoundException;

import java.io.FileOutputStream;

import java.io.IOException;

/**

* 图片处理工具类

* @author wusq

* @since 2011-05-05

*/

public class ImageUtils {

/**

* 图片上传到服务器的方法

* @param upload 图片文件

* @param serverPath 保存在服务器的路径

* @param imgName 图片名字

* @since 2011-05-05

*/

public static void uploadToServer(File upload, String serverPath, String imgName) throws FileNotFoundException, IOException{

File dirPath = new File(serverPath);

if(!dirPath.exists()){

dirPath.mkdirs();

}

String path = dirPath + "//" + imgName;

FileOutputStream fos = new FileOutputStream(path);

FileInputStream fis = new FileInputStream(upload);

byte[] buffer = new byte[1024];

int len = 0;

while ((len = fis.read(buffer)) > 0) {

fos.write(buffer, 0, len);

}

fos.close();

fis.close();

}

}

转自：

标签：