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,Basicconfig.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页面

?

?

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script><textarea cols="80" id="contentID" name="content"></textarea><script type="text/javascript">     CKEDITOR.replace('contentID');  </script>

?

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<FileItem> 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<FileItem> 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("<script type='text/javascript'>");  response.getWriter().write("window.parent.CKEDITOR.tools.callFunction("                          + callback + ",'" + path + "',''" + ")");  response.getWriter().write("</script>");}  %>

?

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

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

?

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

?

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

?

response.getWriter().write("<script type='text/javascript'>");  response.getWriter().write("window.parent.CKEDITOR.tools.callFunction("                          + callback + ",'" + path + "',''" + ")");  response.getWriter().write("</script>");

?这个回调是关键。

?

ok 基本就这了。

?

?

?