富文本编辑器：KindEditor+Struts2 笔记

网上找了一些资料，可是都不很理想，然后自己初步摸索了出来了一些，这里分享下。还有很多问题请指教，我这个是上项目的功能，有好的建议和经验请分享，不胜感激。

我就略讲一下我是怎么熟悉步骤吧。（kindeditor-4.1 + Struts2 + Spring）

欢迎来Q群讨论：296538907

 
需求：一个富文本编辑器，用来生成HTML静态页面用的，做到所见即所得。（我这里还只实现附件（包括图片）上传和在富文本框中的显示，下面也只以这个为例。）
 

分析：这就是一个可视化的编辑器，把编辑好的效果生成HTML代码，然后保存到服务器。然后给客户看的时候就只需要把这HTML代码 拿出来展示就行了（PS：我个人倾向于把它放iframe 里面展示，因为这样不会与其他页面元素有干扰，像样式冲突什么的）。

例如：你插入一张图片，那么生成的HTML代码其实就是一个<img src=”…”/> 标签。那么你保存到的服务器就只需要那张插入的图片和那个<img src=”…”/> 标签了。只是<img src=”…”/> 标签的src属性能够正确的指向你文件所在的路径就行。需要考虑的是，这里要用ajax异步上传，且后台应该返回json格式内容。所以你的后台应该具备这个功能。（见：http://blog.csdn.net/fyw_wu/article/details/10076257）


 
实现（图片上传为例）：
一、找一个开源的富文本编辑器，网上有好多什么FCKeditor 等等，但是我选择了轻量级的、中文的、纯jsp 的KindEditor（官网：http://www.kindsoft.net/）。

二、选择性的把它的下面的文件夹拷到到你工程的WebRoot 下面去。（可以去掉asp、php 文件夹，我做的是jsp，所以asp和php就不要他们了。）

三、启动你的应用，打开jsp文件夹下面的demo.jsp 看看（注意：jsp文件夹下有一个lib目录，里边有3个依赖的jar包，你需要把它也编译进去）。如果打不开demo.jsp那就去整整Struts，这个和KE无关。

四、修改demo.jsp。只要修改一下KE默认的上传处理类就行了（KE有很多初始化参数，详见：http://www.kindsoft.net/docs/option.html#filepostname）。

我的demo.jsp 中的js：

<script>
  KindEditor.ready(function(K) {
   var editor1 = K.create('textarea[name="content1"]', {
    cssPath : '../plugins/code/prettify.css', //样式文件的路径，也可以是一个由文件路径组成的数组
    uploadJson : '../demo/UploadDemoAction_uploadImage.action', //文件的上传路径
	filePostName : 'imgFile', //文件上传时的name，<input type="file" name="就这个值">
    fileManagerJson : '../jsp/file_manager_json.jsp', //对 文件浏览功能 支持的后台 的路径。如： “插入图片->网络图片->图片空间”
    allowFileManager : true
   });
  });
 </script>

五、编写后台上传类。

根据自己的需求写好文件上传处理。 
 
我action 的源码：

package com.jy.action.imsinfo;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
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 org.apache.commons.io.FileUtils;
import com.jy.action.bases.BaseAction;
import com.jy.beans.GUsers;
import com.jy.common.Constant;
import com.jy.common.SessionUtils;

/**
 * 文件上传/下载处理。
 * 
 * @author sy_FYW
 * 
 */
public class FileManagerAction extends BaseAction
{
    private static final long serialVersionUID = 6624518147834729694L;

    // 请求的参数
    // KE 默认的用name=imgFile来上传文件，当然你制定了除外。
    // 这里用到strut上传文件的自动装箱功能
    private File imgFile;
    private String imgFileFileName;
    private String imgFileContentType;

    // 返回的参数
    private Map<String, Object> rootMap = new HashMap<String, Object>();

    //下载用到的
    private InputStream fileStream;
    private String filePath;
    private String downloadFileName;

    public String uploadImage()
    {
        // 获得图片后缀
        String fileExt = imgFileFileName.substring(imgFileFileName.lastIndexOf(".")).toLowerCase();

        Date date = new Date();
        
        SessionUtils su = new SessionUtils();
		GUsers user = (GUsers) su.getSession().get(Constant.CLIENT_USER_LOGINED);
        
        String pathTemp = "/attached/userImgSpace/" + user.getId().toString() 
        				+ "/image/" + new SimpleDateFormat("yyyyMM").format(date) + "/";
        

        // 图片在服务器上的绝对路径。编辑器并没有提供删除图片功能，此路径以后可以用于后台程序对图片的操
        String serverPath = getConfigValue("PORTPHYPATH") + pathTemp;
        
        //根路径
        String rootPath = getConfigValue("PORTVIRPATH") + pathTemp;

        // 重新生成图片名字
        String newImgName = date.getTime() + fileExt;

        // 将图片写入服务器
        try
        {
            FileUtils.copyFile(imgFile, new File(serverPath + newImgName));
        }
        catch (IOException e)
        {
            e.printStackTrace();
            rootMap.put("url", "");
            rootMap.put("relativeURL", "");
            rootMap.put("error", -1);
            rootMap.put("msg", "上传失败！");
        }
        
        
        //返回前台上传文件的url地址，例如KE图片上传后生成<img>时候就会用它来做 src的值。
        rootMap.put("url", rootPath+newImgName);
        rootMap.put("relativeURL", pathTemp.substring(1)+newImgName);
        rootMap.put("error", 0);
        rootMap.put("msg", "上传成功！");

        return "ajax_json";
    }

    /**
     * 文件下载
     * @return
     */
    public String getImg()
    {
        String sitePath = getConfigValue("PORTPHYPATH")  + "/";
        
        downloadFileName = filePath.substring(filePath.lastIndexOf("/"));
        File file = new File(sitePath + filePath);

        try
        {
            if (file.exists())
            {
                fileStream = new FileInputStream(file);
            }
        }
        catch (FileNotFoundException e)
        {
            e.printStackTrace();
        }

        return "download";
    }

    public String deleteFile()
    {
        if (filePath != null)
        {
            File file = new File(filePath);
            file.deleteOnExit();
        }

        rootMap.put("error", 0);
        rootMap.put("msg", "文件删除成功！");

        return "ajax_json";
    }
    
    public File getImgFile()
    {
        return imgFile;
    }

    public void setImgFile(File imgFile)
    {
        this.imgFile = imgFile;
    }

    public String getFilePath()
    {
        return filePath;
    }

    public void setFilePath(String filePath)
    {
        this.filePath = filePath;
    }

    public String getDownloadFileName()
    {
        return downloadFileName;
    }

    public void setDownloadFileName(String downloadFileName)
    {
        this.downloadFileName = downloadFileName;
    }

    public InputStream getFileStream()
    {
        return fileStream;
    }

    public void setFileStream(InputStream fileStream)
    {
        this.fileStream = fileStream;
    }

    public Map<String, Object> getRootMap()
    {
        return rootMap;
    }

    public void setRootMap(Map<String, Object> rootMap)
    {
        this.rootMap = rootMap;
    }

    public String getImgFileFileName()
    {
        return imgFileFileName;
    }

    public void setImgFileFileName(String imgFileFileName)
    {
        this.imgFileFileName = imgFileFileName;
    }

    public String getImgFileContentType()
    {
        return imgFileContentType;
    }

    public void setImgFileContentType(String imgFileContentType)
    {
        this.imgFileContentType = imgFileContentType;
    }

}