ckeditor使用+上传

阅读更多

ckeditor是FCK的升级版。

首先下载包就不说了，大家自己google。

 

1.打开config.js 就在下载的包里面。 配置一些基本的参数。

 

 

CKEDITOR.editorConfig = function(config) {
	config.language = 'zh-cn'; // 配置语言
	config.uiColor = '#FFF'; // 背景颜色
	config.width = '550'; // 宽度
	config.height = '300px'; // 高度
	config.skin = 'office2003';//界面v2,kama,office2003
	//config.toolbar = 'Full';// 工具栏风格Full,Basic
	config.filebrowserUploadUrl = '/common/ajaxUpload.jsp?f=uploadFiles&type=Files';//上传文件的保存路径
	config.filebrowserImageUploadUrl = '/common/ajaxUpload.jsp?f=uploadFiles&type=Images';//上传图片的保存路径
	config.filebrowserFlashUploadUrl = '/common/ajaxUpload.jsp?f=uploadFiles&type=Flash';//上传flash的保存路径
	config.toolbar =
		[
		    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
		    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
		    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
		    ['Link','Unlink','Anchor'],
		    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','TextColor','BGColor',
		     'Maximize', 'ShowBlocks','-','Source','-','Undo','Redo'],
		    '/',
		    ['Styles','Format','Font','FontSize']
		];
};

 

 

 

2.在你的jsp页面

 

 

 

ok  就这样基本可以使用了。

现在在来看看怎么上传。大家看看config.js 里面有3个参数是上传需要用到的。

 

config.filebrowserUploadUrl = '/common/ajaxUpload.jsp?f=uploadFiles&type=Files';//上传文件的保存路径
config.filebrowserImageUploadUrl = '/common/ajaxUpload.jsp?f=uploadFiles&type=Images';//上传图片的保存路径
config.filebrowserFlashUploadUrl = '/common/ajaxUpload.jsp?f=uploadFiles&type=Flash';//上传flash的保存路径

 

ok 看到这里 大家应该都明白了，需要一个ajaxUpload.jsp。下面就是ajaxUpload.jsp的全部内容

<%@ page language="java" pageEncoding="gbk"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload" %>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory" %>
<%@page import="java.io.File"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.List"%>
<%@page import="java.io.InputStream"%>
<%@page import="java.io.OutputStream"%>
<%@page import="java.io.FileOutputStream"%>
<%@page import="net.ask123.doers.common.Constants"%>
<%@page import="net.ask123.doers.common.VeDate"%>
<%@page import="org.apache.commons.lang.StringUtils"%>
<%@page import="org.apache.commons.fileupload.FileItemFactory"%>
<%@page import="java.util.Iterator"%>
<%
	FileItemFactory factory = new DiskFileItemFactory();
	ServletFileUpload upload = new ServletFileUpload(factory);
	List items = upload.parseRequest(request);
	
	//...type 不为空代表ck上传
	String type= request.getParameter("type");
	String callback = request.getParameter("CKEditorFuncNum");
	String f = request.getParameter("f");
	if(f == null || f == ""){
		f = "ad";
	}
	String sid = VeDate.getNo(4);
	String filePath = "/"+f+"/" + sid.substring(0, 4) + "/"+ sid.substring(4, 6) + "/";
	String sPath = Constants.FILEUPLOADADDRESS + filePath;
	
	
	Iterator itr = items.iterator();
	
	String path = "";
	while (itr.hasNext()) {
		 FileItem item=(FileItem)itr.next();
		 if(!item.isFormField()){
			// 获得文件名及路径
             String fileName = item.getName();
			
             if (fileName != null) {
               	 File firstFolder = new File(sPath);
               	 if(!firstFolder.exists()) {
               		firstFolder.mkdirs();  
                 }
              	 String ext = fileName.substring(fileName.lastIndexOf(".")+1,fileName.length());  
		         ext = ext.toLowerCase();  
            	 File fullFile = new File(sid+"."+ext);
            	 
            	 path = filePath+fullFile.getName();
           		 File fileOnServer = new File(sPath,
                            fullFile.getName());
                 item.write(fileOnServer);
             }
		 }
	}
	
	response.setCharacterEncoding("UTF-8");
	if(StringUtils.isBlank(type)){
		response.getWriter().write(path);
	}else{
		response.getWriter().write("");
	}
	  
%>

 

里面有些代码是自己的业务逻辑 大家可以精简一点。

这里有2个要注意的地方！

 

1. 需要下载org.apache.commons.fileupload 这个包 大家应该都知道 apache的下载组件。

 

2.执行完jsp后，CKEDITOR需要一个js的回调

 

response.getWriter().write("");

 这个回调是关键。

 

ok 基本就这了。