码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-01-27 19:14:19      阅读:385      评论:0      收藏:0      [点我收藏+]

标签:

 应用环境:struts2,jsp。IE8下测试通过。

 

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

 

       先来看页面

 

 
[java] view plaincopy
<%@ 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>  
 

       后台程序的处理

 

[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 ="<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;  
    }  

 

        引用的工具类

 

[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();  
    }  

 

转自:

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

标签:

原文地址:http://www.cnblogs.com/mfc-itblog/p/5163993.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!