网上找了一些资料,可是都不很理想,然后自己初步摸索了出来了一些,这里分享下。还有很多问题请指教,我这个是上项目的功能,有好的建议和经验请分享,不胜感激。
我就略讲一下我是怎么熟悉步骤吧。(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;
}
}