KindEditor的使用和上传图片的后台处理
2012-12-16 16:11
375 查看
应用环境：struts2，jsp。IE8下测试通过。
kindeditor版本为3.5.4，官网下载后解压，取plugins、skins文件夹和kindeditor.js置于Web工程的WebRoot下。本文仅简单介绍如何使用kindeditor，并实现图片上传功能，页面上的提交功能未予实现。
先来看页面
后台程序的处理
引用的工具类
本文原先发表于本人的另一博客，后弃之不用，特转移到新博客来。
kindeditor版本为3.5.4，官网下载后解压，取plugins、skins文件夹和kindeditor.js置于Web工程的WebRoot下。本文仅简单介绍如何使用kindeditor，并实现图片上传功能，页面上的提交功能未予实现。
先来看页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>kindeditor测试页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="${pageContext.request.contextPath}/component/kindeditor/kindeditor.js"></script>
<script type="text/javascript">
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'
});
</script>
</head>
<body>
kindeditor测试页面 <br>
<form id="example" method="post" action="${pageContext.request.contextPath}/component/kindeditor/preview.do">
<textarea id="content" name="content" style="width:700px;height:300px;visibility:hidden;"><br />
<input type="submit" value="提交内容"/> (提交快捷键: Ctrl + Enter)
</form>
</body>
</html>后台程序的处理
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 ="<mce:script type=/"text/javaScript/"><!--
parent.KE.plugin[/"image/"].insert(/""
+ id
+ "/",/""
+ url
+ "/",/""
+ imgTitle
+ "/",/""
+ imgWidth
+ "/",/""
+ imgHeight
+ "/",/""
+ border + "/""
+");
// --></mce:script>";
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;
}
}引用的工具类
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();
}
}本文原先发表于本人的另一博客，后弃之不用，特转移到新博客来。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- KindEditor的使用和上传图片的后台处理
- KindEditor的使用和上传图片的后台处理
- KindEditor的使用和上传图片的后台处理
- 使用ThinkPHP上传类处理KindEditor上传的图片
- 使用ThinkPHP上传类处理KindEditor上传的图片(主要是注意返回格式的方式)
- 使用ThinkPHP上传类处理KindEditor上传的图片
- jQuery使用Base64 生成图片预览和java后台不同的接收处理方式
- Spring中使用kindeditor上传图片时遇到的问题
- ajax 请求后台数据(及使用FormData对象提交表单及上传图片）
- dede验证码不显示，dede图集后台上传图片报错 提示红色FILEID错误的处理办法
- 前台使用ajax上传图片，后台 node.js 使用 formidable 进行图片接受并存于服务器静态文件夹中
- Laravel中使用 Editor.md 上传图片如何处理？
- 使用Java上传图片经过压缩处理图片变色问题
- Thinkphp3.2.3 ----后台----图片上传相应处理
- 上传图片+浏览+裁切 Demo(无后台处理部分)
- 使用kindeditor来替换ecshop的fckeditor编辑器，让ecshop可以批量上传图片
- thinkphp使用 kindEditor 附加图片上传
- 关于后台处理上传图片和显示图片的简单介绍(亲测)
- 使用Spring MVC对KindEditor进行图片/Flash上传