ckeditor的用法说明:
1.在head标签中引用ckeditor.js
2.在页面中用textarea来进行引用(class="ckeditor"很关键,不能省略)
3.屏蔽掉上传图片的时候“浏览服务器”功能
打开ckeditor目录下的plugins\editor\plugins\image\dialogs\image.js文件,
搜索第一个“browseServer”在其后面加上 ,style:'display:none' 可将“图像”选项卡“浏览服务器”功能屏蔽掉
搜索第二个“browseServer”在其后面加上 ,style:'display:none' 可将“超链接”选项卡“浏览服务器”功能屏蔽掉
4.实现上传图片功能
(1)打开config.js,添加如下代码:
var pathName = window.document.location.pathname;
//获取带"/"的项目名,如:/uimcardprj
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
修改config.filebrowserImageBrowseUrl 和 config.filebrowserUploadUrl 的值分别为:
config.filebrowserImageBrowseUrl = projectName+'/system/ckeditorUpload.action'; //(该路径为上传图片时请求的action路径)
config.filebrowserUploadUrl = projectName+'/system/ckeditorUpload.action';
(2)在xwork.xml请求资源路径配置文件中加入以下配置
(3)根据action请求路径新建一个action类并让其继承ActionSupport基类,其中为实现上传图片的核心代码
package net.survey.util;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import com.opensymphony.webwork.ServletActionContext;
import com.opensymphony.xwork.ActionSupport;
public class CkeditorUpload extends ActionSupport {
private File upload; //文件
private String uploadContentType; //文件类型
private String uploadFileName; //文件名
public File getUpload() {
return upload;
}
public void setUpload(File upload) {
this.upload = upload;
}
public String getUploadContentType() {
return uploadContentType;
}
public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}
public String getUploadFileName() {
return uploadFileName;
}
public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}
@Override
public String execute() throws Exception {
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("GBK");
PrintWriter out = response.getWriter();
// CKEditor提交的很重要的一个参数
String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
String expandedName = ""; //文件扩展名
if (uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) {
//IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg
expandedName = ".jpg";
}else if(uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")){
//IE6上传的png图片的headimageContentType是"image/x-png"
expandedName = ".png";
}else if(uploadContentType.equals("image/gif")){
expandedName = ".gif";
}else if(uploadContentType.equals("image/bmp")){
expandedName = ".bmp";
}else{
out.println("");
return null;
}
if(upload.length() > 600*1024){
out.println("");
return null;
}
InputStream is = new FileInputStream(upload);
String uploadPath = ServletActionContext.getServletContext().getRealPath("/upload/img");
String fileName = java.util.UUID.randomUUID().toString(); //采用时间+UUID的方式随即命名
fileName += expandedName;
File toFile = new File(uploadPath, fileName);
OutputStream os = new FileOutputStream(toFile);
byte[] buffer = new byte[1024];
int length = 0;
while ((length = is.read(buffer)) > 0) {
os.write(buffer, 0, length);
}
is.close();
os.close();
// 返回“图像”选项卡并显示图片
out.println("");
return null;
}
}
(4)为了能在webwork环境下识别 UploadContentType 和 UploadFileName 属性,需要在src下的webwork.properties中添加以下键值对
### character encoding
webwork.i18n.encoding=gbk
webwork.locale=zh_CN
### multipart setting
webwork.multipart.saveDir=/tmp
webwork.multipart.maxSize=2097152
webwork.multipart.parser=jakarta
(5)为了能够实现图片上传,需要在所在的表单form标签中设置enctype="multipart/form-data"