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); Listitems = 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 基本就这了。