简单的Ckeditor--实现上传的功能
???? 网络查找的资料都是说Ckeditor是Fckeditor的升级，虽然它的界面比较的漂亮，但是有些功能必须要另外的添加，例如上传功能，我在网上查找了很多资料后，才找了这个比较好的，所以和大家分享一下。
?
程序的结构图
?
在index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="ckeditor/ckeditor.js"></script><script type="text/javascript">window.onload = function() {CKEDITOR.replace('editor');};</script></head><body><form action="ShowServlet" method="post"><textarea rows="" cols="" name="editor"></textarea><br /> <input type="submit" value="提交"><input type="reset"></form></body></html>?
上传的操作页面
browse.jsp
<%@page import="java.io.File"%><%@ page language="java" contentType="text/html; charset=GB18030"pageEncoding="GB18030"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><title>图片浏览</title><script type="text/javascript">//这段函数是重点，不然不能和CKEditor互动了function funCallback(funcNum, fileUrl) {var parentWindow = (window.parent == window) ? window.opener: window.parent;parentWindow.CKEDITOR.tools.callFunction(funcNum, fileUrl);window.close();}</script></head><body><%String path = request.getContextPath() + "/";String type = "";if (request.getParameter("type") != null)//获取文件分类type = request.getParameter("type").toLowerCase() + "/";String clientPath = "ckeditor/uploader/upload/" + type;File root = new File(request.getSession().getServletContext().getRealPath(clientPath));if (!root.exists()) {root.mkdirs();}String callback = request.getParameter("CKEditorFuncNum");File[] files = root.listFiles();if (files.length > 0) {for (File file : files) {String src = path + clientPath + file.getName();out.println("<img width='110px' height='70px' src='" + src+ "' alt='" + file.getName()+ "' onclick=\"funCallback(" + callback + ",'"+ src + "')\">");}} else {out.println("<h3>未检测到资源。</h3>");}%></body></html>?upload.jsp
<%@page import="java.io.File"%><%@page import="java.util.UUID"%><%@page import="org.apache.commons.fileupload.FileItem"%><%@page import="java.util.List"%><%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%><%@page import="org.apache.commons.fileupload.FileItemFactory"%><%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%><%@ page language="java" contentType="text/html; charset=GB18030"pageEncoding="GB18030"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><title>JSP上传文件</title></head><body><%String path = request.getContextPath() + "/";if (ServletFileUpload.isMultipartContent(request)) {String type = "";if (request.getParameter("type") != null)//获取文件分类type = request.getParameter("type").toLowerCase() + "/";String callback = request.getParameter("CKEditorFuncNum");//获取回调JS的函数NumFileItemFactory factory = new DiskFileItemFactory();ServletFileUpload servletFileUpload = new ServletFileUpload(factory);servletFileUpload.setHeaderEncoding("UTF-8");//解决文件名乱码的问题List<FileItem> fileItemsList = servletFileUpload.parseRequest(request);for (FileItem item : fileItemsList) {if (!item.isFormField()) {String fileName = item.getName();fileName = "file" + System.currentTimeMillis()+ fileName.substring(fileName.lastIndexOf("."));//定义文件路径，根据你的文件夹结构，可能需要做修改String clientPath = "ckeditor/uploader/upload/" + type+ fileName;//保存文件到服务器上File file = new File(request.getSession().getServletContext().getRealPath(clientPath));if (!file.getParentFile().exists()) {file.getParentFile().mkdirs();}item.write(file);//打印一段JS，调用parent页面的CKEditor的函数，传递函数编号和上传后文件的路径；这句很重要，成败在此一句out.println("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("+ callback+ ",'"+ path+ clientPath+ "')</script>");break;}}}%></body></html>?config.js
?
/* * Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.html or http://ckeditor.com/license */CKEDITOR.editorConfig = function(config) {// Define changes to default configuration here. For example:// config.language = 'fr';// config.uiColor = '#AADC6E';config.language = 'zh-cn';config.filebrowserBrowseUrl = 'ckeditor/uploader/browse.jsp';config.filebrowserImageBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Images';config.filebrowserFlashBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Flashs';config.filebrowserUploadUrl = 'ckeditor/uploader/upload.jsp';config.filebrowserImageUploadUrl = 'ckeditor/uploader/upload.jsp?type=Images';config.filebrowserFlashUploadUrl = 'ckeditor/uploader/upload.jsp?type=Flashs';config.filebrowserWindowWidth = '640';config.filebrowserWindowHeight = '480';config.toolbar_A = [['Source'],['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-','Print', 'SpellChecker', 'Scayt'],['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll','RemoveFormat'],'/',['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'], '/',['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'],['Maximize', 'ShowBlocks']];config.toolbar = 'A';};?
?
所使用的源码，被打包成压缩包
?