JSP中应用CKEditor在线编辑器

ckeditor的用法说明：

 

1.在head标签中引用ckeditor.js

 

　<script type='text/javascript' src="../static/plugins/editor/ckeditor.js"></script>

 

2.在页面中用textarea来进行引用（class="ckeditor"很关键，不能省略）

 

　<textarea class="ckeditor" id="question_content" name="question.questionContent" style="width: 970px" escape="true"></textarea>

 

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请求资源路径配置文件中加入以下配置

 

　<action name="ckeditorUpload" class="net.survey.util.CkeditorUpload">

 　　<interceptor-ref name="defaultStack" />

        <result name="success"></result>

     </action>

 

（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("<script type=\"text/javascript\">");    

　　　out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）');");   

　　　out.println("</script>");  

　　　return null;  

　　}  

 

　　if(upload.length() > 600*1024){  

　　　out.println("<script type=\"text/javascript\">");    

　　　out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件大小不得大于600k');");   

　　　out.println("</script>");  

　　　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("<script type=\"text/javascript\">");    

　　out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "/minexplore/upload/img/" + fileName + "','')");    

　　out.println("</script>");

 

　　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"