KindEditor的使用和上传图片的后台处理

最新推荐文章于 2024-04-01 16:54:57 发布

wusq

最新推荐文章于 2024-04-01 16:54:57 发布

阅读量886

点赞数

分类专栏： UI 文章标签： kindeditor KindEditor

本文链接：https://blog.csdn.net/wusqwork/article/details/8301860

版权

UI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

应用环境：struts2，jsp。IE8下测试通过。
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();
	}
}

本文原先发表于本人的另一博客，后弃之不用，特转移到新博客来。

wusq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
KindEditor的使用和上传图片的后台处理

应用环境：struts2，jsp。IE8下测试通过。kindeditor版本为3.5.4，官网下载后解压，取plugins、skins文件夹和kindeditor.js置于Web工程的WebRoot下。本文仅简单介绍如何使用kindeditor，并实现图片上传功能，页面上的提交功能未予实现。先来看页面<%String path = request.getContextPath();
复制链接

扫一扫

专栏目录