您的位置：首页 > 编程语言 > Java开发

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

2016-09-23 16:09 357 查看

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

    }

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： java 图片 plugins

相关文章推荐

新的分享

章节导航