富文本编辑器XHEditor实现

首先下载XHEditor，并解压，将文件放入工程，记得要在同一个目录

其次，引用XHEditor的JS文件

<script type=text/javascript src="${ctxStatic}/common/xheditor-1.2.2.min.js"></script>
<script type=text/javascript src="${ctxStatic}/common/xheditor_lang/zh-cn.js"></script>

在页面上构建一个文本域的DOM对象

        <div class="control-group">
            <label class="control-label">图文详情：</label>
            <div class="controls">
                <form:textarea id="content" path="content" rows="4" maxlength="200" style="width:1000px;height:400px" class="input-xlarge"/>
            </div>
        </div>

在该页面的ONLOAD方法中，初始化该文本编辑器，注意ID要与文本域的ID一致

                        $('#content').xheditor({
                            tools : 'full',
                            skin : 'default',
                            upMultiple : true,
                            upImgUrl : "${ctx}/UploadFile.do",
                            upImgExt : "jpg,jpeg,gif,bmp,png",
                            onUpload : insertUpload,
                            html5Upload : false
                        });

在后台构建上传文件的处理类。具体代码如下

package com.its.common.servlet;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.activiti.engine.impl.util.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;

@Controller
public class UploadFileServlet extends HttpServlet {

    /**
     * @Fields serialVersionUID
     */
    private static final long serialVersionUID = 1L;
    private final String uploadLocation = "fileupload\\";
    private final String imageLocation = "images\\";
    private final String otherLocation = "others\\";
    private final String imageThumnailLoation = "thumnail\\";

    @RequestMapping(value = "${adminPath}/UploadFile.do", method = RequestMethod.POST)
    @ResponseBody
    public String upload(HttpServletRequest request, HttpServletResponse response) throws IOException {

        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        // 获取前台传值
        String[] userNames = multipartRequest.getParameterValues("userName");
        String[] contents = multipartRequest.getParameterValues("content");
        String userName = "";
        String content = "";
        if (userNames != null) {
            userName = userNames[0];
            System.out.println("userName:" + userName);
        }
        if (contents != null) {
            content = contents[0];
            System.out.println("content:" + content);
        }
        Map
   
   
    
     fileMap = multipartRequest.getFileMap();
        // 上传到服务端的路径
        String ctxPath = request.getSession().getServletContext().getRealPath("/") + uploadLocation;
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");
        String ymd = sdf.format(new Date());

        String originalFileName = null;
        for (Map.Entry
    
    
     
      entity : fileMap.entrySet()) {
            // 上传文件名
            MultipartFile mf = entity.getValue();
            originalFileName = mf.getOriginalFilename();
            String fileExt = originalFileName.substring(originalFileName.lastIndexOf(".") + 1).toLowerCase();

            // new file name
            SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd_HHmmss");
            // 文件名以当前时间+2位随机数构成
            int i = (int) (Math.random() * 900) + 100;
            String newFileName = df.format(new Date()) + "_" + String.valueOf(i) + "." + fileExt;

            Map
     
     
      
       map = new HashMap
      
      
       
       ();
            // 是image则进入此处开始执行
            if (fileExt.equals("jpg") || fileExt.equals("png")) {

                // 创建image文件夹，字目录按日期来分
                String uploadFolder = ctxPath + imageLocation + ymd + "/";
                File imageFile = new File(uploadFolder);
                if (!imageFile.exists()) {
                    imageFile.mkdirs();
                }
                String uploadFileLocation = uploadFolder + newFileName;
                if (this.htmlUpload(mf.getInputStream(), uploadFileLocation)) {
                    System.out.println(" ------- image upload success");
                    map.put("err", "");
                    map.put("msg", "/ehomebusiness/" + uploadLocation + imageLocation + ymd + "/" + newFileName);
                    // 如果图片上传成功，那么就要生成缩略图
                    String thumnailFileName = "thum_" + newFileName;
                    String uploadFolder2 = ctxPath + imageLocation + imageThumnailLoation + ymd + "/";
                    File imageThumnailFile = new File(uploadFolder2);
                    if (!imageThumnailFile.exists()) {
                        imageThumnailFile.mkdirs();
                    }
                    BufferedImage bi = ImageIO.read(mf.getInputStream());
                    if (bi != null) {
                        String uploadFileLocation2 = uploadFolder2 + thumnailFileName;
                        if (this.uploadJPGfile(bi, uploadFileLocation2)) {
                            System.out.println(" ------- generate thumnail success");
                        } else {
                            System.out.println(" ------- generate thumnail fail");
                        }
                    }
                    JSONObject json = new JSONObject(map);
                    return json.toString();
                } else {
                    System.out.println(" ------- image upload fail");
                    return "image file upload fail";
                }
            }
            // 不是image则调到此处开始执行
            else {
                // 创建others文件夹，字目录按日期来分
                String uploadFolder3 = ctxPath + otherLocation + ymd + "/";
                File otherFile = new File(uploadFolder3);
                if (!otherFile.exists()) {
                    otherFile.mkdirs();
                }
                String uploadFileLocation = uploadFolder3 + newFileName;
                if (this.htmlUpload(mf.getInputStream(), uploadFileLocation)) {
                    System.out.println(" ------- other upload success");
                    return "other file upload success";
                } else {
                    System.out.println(" ------- other upload fail");
                    return "other file upload fail";
                }
            }

        }
        return null;
    }

    /**
     * @Title: htmlUpload @param @param inputStream 传进一个流 @param @param
     *         uploadFile 服务端输出的路径和文件名 @return boolean 返回类型 @throws
     */
    private boolean htmlUpload(InputStream inputStream, String uploadFile) {
        try {
            byte[] buff = new byte[4096]; // 缓冲区
            FileOutputStream output = new FileOutputStream(uploadFile); // 输出流
            int bytecount = 1;
            while ((bytecount = inputStream.read(buff, 0, 4096)) != -1) { // 当input.read()方法，不能读取到字节流的时候，返回-1
                output.write(buff, 0, bytecount); // 写入字节到文件
            }
            output.flush();
            output.close();
            return true;
        } catch (Exception e) {
            return false;
        }
    }

    /**
     * @Title: uploadJPGfile @param @param img @param @param uploadFileLocation2
     *         服务端输出的路径和文件名 @return boolean 返回类型 @throws
     */
    public boolean uploadJPGfile(BufferedImage img, String uploadFileLocation2) {
        try {
            // 转为jpg标准格式//
            if (img != null) {
                int new_w = 150;
                int new_h = 100;
                BufferedImage tag = new BufferedImage(new_w, new_h, BufferedImage.TYPE_INT_RGB);
                tag.getGraphics().drawImage(img, 0, 0, new_w, new_h, null); // 绘制缩小后的图
                FileOutputStream out = new FileOutputStream(uploadFileLocation2);
                JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
                encoder.encode(tag);
                out.close();
                return true;
            } else {
                return false;
            }
        } catch (Exception e) {
            System.out.println("异常错误！");
            return false;
        }
    }
}
<%@ page contentType="text/html;charset=UTF-8" %>


	
       
       
	
       
       
	 rel="stylesheet" href="${ctxStatic}/common/multiplefileUpload.css" type="text/css" />
	<script type=text/javascript src="${ctxStatic}/common/xheditor-1.2.2.min.js"></script>
    <script type=text/javascript src="${ctxStatic}/common/xheditor_lang/zh-cn.js"></script> 
	<script type="text/javascript">
		$(document).ready(function() {
			//$("#name").focus();
                        //初始化xhEditor编辑器插件  
                        $('#content').xheditor({
                            tools : 'full',
                            skin : 'default',
                            upMultiple : true,
                            upImgUrl : "${ctx}/UploadFile.do",
                            upImgExt : "jpg,jpeg,gif,bmp,png",
                            onUpload : insertUpload,
                            html5Upload : false
                        });
                        //xbhEditor编辑器图片上传回调函数  
                        function insertUpload(msg) {
                            var _msg = msg.toString();
                            $("#content").append(_msg);
                        }
                        //处理服务器返回到回调函数的字符串内容,格式是JSON的数据格式.  
                        function Substring(s) {
                            return s.substring(s.substring(0,
                                    s.lastIndexOf("/")).lastIndexOf("/"),
                                    s.length);
                        }
	</script>


		
       
       
 
        图文详情：