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

来源：互联网发布：熊猫tv登录网络错误编辑：程序博客网时间：2024/05/22 05:01

分类：页面 2011-05-05 17:06 1030人阅读评论(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/"></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();
    }
}

0 0