CKEditor 3安装和使用

FCKEditor是一款优秀的富文本编辑器，在Web开发中用作文本编辑插件，非常好用，现在已经升级为CKEditor3，界面更加炫酷，功能更加丰富。
之前在FCK中使用过文件上传功能(普通文件，图片，FLASH)，而在CK中，官方使用另外一套组件CKFinder进行上传，CKFinder也是富客户端界面，效果不错，但是官方示例中没有对Java进行支持(PHP,ASP/ASP.NET都有)。改造CKFinder比较麻烦了，把PHP/.NET的改成Java的几乎不现实，还是等官网出java版本再使用吧。不过要是用CKEditor的上传功能没有关系，既然提供了上传接口，那么实现手段我们自己实现就是了，下面从CKEditor的安装开始介绍。
要使用CKEditor，首先要下载开发包，官网http://ckeditor.com/ 提供最新版下载，下载后包含源码和例子，当然正式运行中并不需要这些东西。我们可以提取如下内容：
[img]http://dl.iteye.com/upload/attachment/206748/318410aa-37a7-339b-87ac-cf04eae0f74d.jpg[/img]
ckeditor/lang下是语言支持包，这里可以精简，一般保留zh-cn和en就够了，目录放好后，就是配置和写页面了，也很简单。文件上传我们使用servlet进行，比较简单，只需要apache commons组件中的fileupload和io即可完成。
和FCKEditor不同的是，CKEditor的配置需要使用config.js。那我们先来配置config.js。

CKEDITOR.editorConfig = function(config) {
	config.language = 'zh-cn'; // 配置语言
	config.uiColor = '#FFF'; // 背景颜色
	config.width = 'auto'; // 宽度
	config.height = '300px'; // 高度
	config.skin = 'office2003';//界面v2,kama,office2003
	config.toolbar = 'Full';// 工具栏风格Full,Basic
};

一般配置这些参数就够了，其他的详细配置可以参考文档了，值得说的是skin选项，有3中，v2就是还原到FCKEditor的风格，kama和office2003是新风格，我使用了office2003风格，官网的样式是kama。配置了skin后就不用配置uiColor了。下面看页面配置:

	
		
内容:
		
<br>       
	
	
		
		
 			type="reset" name="Reset" value="重置" />
	

引入js文件，注意相对路径不能错了，我这里工程名和文件夹同名，肯定出现两次。在HTML页面中写一个textarea，然后脚本段就完成了。配置非常简单，此时就可以看到CKEditor的效果了。但是打开图片，Flash时是没有上传选项卡的。
首先我们来测试一下CKEditor，写个JSP页面来接收参数即可

<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>





<%request.setCharacterEncoding("UTF-8"); %>

	style="table-layout: fixed;">








	
		
主题:
		
${param.title}
	
	
		
内容:
		
${param.content}
	

[img]http://dl.iteye.com/upload/attachment/206750/8018bf12-c915-3d86-a09e-5cb225e23be0.jpg[/img]
提交这个页面到display.jsp，我们就能看到下面的效果了，非常不错。
[img]http://dl.iteye.com/upload/attachment/206752/75e9b13d-186e-31a7-be23-af2af516f177.jpg[/img]
至此，CKEditor的安装和测试全部结束，我们已经得到想要的结果了，在系统设计时要考虑使用编辑器的数据库字段大小，要足够大。如果是发布系统那就使用freemarker模板生成静态文件保存吧。数据库设计还是不要挂太大的存储负载。
下一篇将介绍使用自定义的Servlet实现CKEditor3的上传功能。
欢迎交流，希望对使用者有用。