[ckeditor系列]CKEditor 3.6 入门
第一步：载入 CKEditor
http://ckeditor.com/download 下载ckeditor的最新版本（我下了个5月9号发布的3.6），解压后将 ckeditor 文件夹复制到web工程的根目录下。在要使用CKEditor的页面<head>块中插入以下代码，将其引入：
<head> ... <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head>
第二部：创建 CKEditor 实例
首先，在页面中插入一个<textarea>节点：
<textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>
或者在 window.onload 中：
<script type="text/javascript"> window.onload = function() { CKEDITOR.replace( 'editor1' ); }; </script>
第三步：更改config.js
config.js是 CKEditor 的主配置文件，更改config.js来定制自己的 CKEditor 样式：
/* Copyright (c) 2003-2011, 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.uiColor = '#FFF'; // 背景颜色 config.width = 'auto'; // 宽度 config.height = '300px'; // 高度 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','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'], '/', ['Styles','Format'], ['Bold','Italic','Strike'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['Link','Unlink','Anchor'], ['Maximize','-','About'] ]; };
第四步：提交编辑器内容
可以将 CKEditor 实例看作一个<textarea>处理，在表单提交时， CKEditor 实例中的内容被提交到服务器，可以通过<textarea> 的名称获得其内容。
如果需要在客户端获得 CKEditor 实例的内容，可以通过调用 CKEditor API，在表单提交前对其进行处理，如下：
码 <script type="text/javascript"> var editor_data = CKEDITOR.instances.editor1.getData(); </script>
一个完整的例子：
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>CKEditor</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> </head> <body> <form id="form1" name="form1" method="post" action="display.jsp"> <table width="650" height="400" border="0" align="center"> <tr> <td valign="top"> 内容: </td> <td> <textarea id="editor1" name="editor1"><p>Initial value.</p></textarea> <script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script> </td> </tr> <tr> <td></td> <td> <input type="submit" name="Submit" value="提交" /> <input type="reset" name="Reset" value="重置" /> </td> </tr> </table> </form> </body> </html>