富文本编辑器：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;    }}