ckeditor使用+上传

最新推荐文章于 2025-11-25 12:11:25 发布

最新推荐文章于 2025-11-25 12:11:25 发布 · 149 阅读

文章标签：

#ckeditor #java #jsp #上传 #fck

js 同时被 2 个专栏收录

17 篇文章

订阅专栏

java

13 篇文章

订阅专栏

本文详细介绍了CKEditor的基本配置方法以及如何实现文件、图片和Flash的上传功能，包括配置参数设置、JSP页面集成、上传路径设置及AJAX上传逻辑实现。

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页面

<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 基本就这了。