简单的Ckeditor--实现上传的功能

lixue150

浏览: 75476 次
性别:
来自: 合肥

最近访客更多访客>>

sxl1001

我...

根号九加一

dreamhappens

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

编辑器

网络查找的资料都是说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的函数Num
			FileItemFactory 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';
};

所使用的源码，被打包成压缩包