使用ckeditor上传图片

前几天用了国产的keditor，感觉不错，下午研究了一下外国的fck，当然现在是ck了。主要是上传图片，其余的都好说。

下载fck的源文件，解压后，将ckeditor放到WebContent下。

打开一个jsp页面，引入ckeditor的js 如 <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 

引入jquery的js 也可以不引，主要是控制页面加载完成后。

引入ckeditor第一步： 代码如下

$(document).ready(function(){
CKEDITOR.replace('editor1',{
filebrowserImageUploadUrl : 'FCKUpload' 
}); 
});

页面加载完成后，将页面id为editor1的textarea元素替换成ckeditor。因此，页面要有一个id为editor1的textarea如：

<textarea id="editor1" name="editor1"></textarea>  

第二步：打开ckeditor的文件夹， 找到config.js，这是关于ckeditor的配置信息

CKEDITOR.editorConfig = function( config )
{
   config.language = 'zh-cn'; // 配置语言  
   config.uiColor = '#FFF'; // 背景颜色  
   config.width = '700px'; // 宽度  
   config.height = '150px'; // 高度  
   config.skin = 'office2003';// 界面v2,kama,office2003  
   config.toolbar = 'MyToolbar';// 工具栏风格（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js  
   config.toolbarCanCollapse = false;// 工具栏是否可以被收缩  
   config.resize_enabled = false;// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js  
     
   //自定义的工具栏     ，启动后，根据页面上的名字，对照工具栏的英文，基本可以对应上。 
   config.toolbar_MyToolbar =  
   [  
       ['Source','-','Save','Preview','Print'],  
       ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],  
       ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],  
       ['Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],  
       '/',  
       ['Styles','Format'],  
       ['Bold','Italic','Strike'],  
       ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],  
       ['Link','Unlink','Anchor'],  
       ['Maximize','-','About']  
   ];  
};

第三部，上传

在第一步的ready事件中，有一句代码：filebrowserImageUploadUrl : 'FCKUpload' 。

这句的意思是，制定ckeditor的图片上传的路径。现在放的是一个servlet。

servlet处理代码如下：

req.setCharacterEncoding("UTF-8");
resp.setCharacterEncoding("UTF-8");
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload sfu = new ServletFileUpload(factory);
FileItem item = null;
try {
List<FileItem> list = sfu.parseRequest(req);
Iterator i = list.iterator();
while (i.hasNext()) {
item = (FileItem) i.next();
if (!item.isFormField()) {
String name = item.getName();
int index = name.lastIndexOf(".");
String attndName = name.substring(index);
Long t = System.currentTimeMillis();
String cpath = getServletContext().getRealPath("/");// 服务端地址
String path = cpath + "keImg\\" + t + attndName;// 保存的绝对地址
String rurl = req.getScheme() + "://" + req.getServerName()
+ ":" + req.getServerPort() + req.getContextPath()
+ "/keImg/" + t + attndName;
System.out.println(rurl);
File file = new File(path);
item.write(file);
// CKEditorFuncNum是回调时显示的位置，这个参数必须有
String callback = req.getParameter("CKEditorFuncNum");
resp.getWriter().println("<script type=\"text/javascript\">");
resp.getWriter().println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'" + rurl + "',''" + ")");
resp.getWriter().println("</script>");
}
}
} catch (Exception e) {
e.printStackTrace();
} finally {
item.delete();
}

重点是红色区域，将一段js代码写到输出流中，代码的意思是，执行callFunction这个函数，其中有两个参数，callback，是ckeditor自动传给我们的，不必关心，第二个，便是图片的地址。。这段js是重点。

配置无误，图片可上传成功，亲自测试，通过