有多种方法可以将CKEditor集成到你的页面中，下面是最通常的做法。


第一步：载入 CKEditor

​​http://ckeditor.com/download​​ 下载ckeditor的最新版本（我下了个5月9号发布的3.6），解压后将 ckeditor 文件夹复制到web工程的根目录下。在要使用CKEditor的页面<head>块中插入以下代码，将其引入：


Html代码 ​​CKEditor 3.6 入门_工具栏​​​ ​​CKEditor 3.6 入门_javascript_02CKEditor 3.6 入门_自定义_03​​


  2. <head>
  3. ...
  4. <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
  5. </head> 


<head>  ...  <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head>


第二部：创建 CKEditor 实例


首先，在页面中插入​​一个<textarea>节点：​​


Html代码 ​​CKEditor 3.6 入门_工具栏​​​ ​​CKEditor 3.6 入门_javascript_02CKEditor 3.6 入门_自定义_03​​

  1. <textarea id="editor1" name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea> 


<textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>


如果你想让编辑器在初始化时，显示诸如从数据库等处查出的数据，只需要将他们插入​​<textarea>节点中，如上面<p>节点中的内容。​​


创建好​​<textarea>后，用 ​​CKEditor API 替换原来的HTML节点，如下：


Html代码 ​​CKEditor 3.6 入门_工具栏​​​ ​​CKEditor 3.6 入门_javascript_02CKEditor 3.6 入门_自定义_03​​


  2. <script type="text/javascript">
  3. CKEDITOR.replace( 'editor1' );
  4. </script> 


<script type="text/javascript">  CKEDITOR.replace( 'editor1' ); </script>

或者在​​ window.onload 中：​​


Html代码 ​​CKEditor 3.6 入门_工具栏​​​ ​​CKEditor 3.6 入门_javascript_02CKEditor 3.6 入门_自定义_03​​


  2. <script type="text/javascript">
  3. window.onload = function()
  4. {
  5. CKEDITOR.replace( 'editor1' );
  6. };
  7. </script> 


<script type="text/javascript">  window.onload = function()  {   CKEDITOR.replace( 'editor1' );  }; </script>


第三步：更改config.js

config.js是 CKEditor 的主配置文件，更改config.js来定制自己的 CKEditor 样式：


Js代码 ​​CKEditor 3.6 入门_工具栏​​​ ​​CKEditor 3.6 入门_javascript_02CKEditor 3.6 入门_自定义_03​​


  2. /*
  3. Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
  4. For licensing, see LICENSE.html or http://ckeditor.com/license
  5. */

  7. CKEDITOR.editorConfig = function( config )
  8. {
  9. // Define changes to default configuration here. For example:
  10. // config.language = 'fr';
  11. // config.uiColor = '#AADC6E';
  12. config.language = 'zh-cn'; // 配置语言
  13. config.uiColor = '#FFF'; // 背景颜色
  14. config.width = 'auto'; // 宽度
  15. config.height = '300px'; // 高度
  16. config.skin = 'office2003';// 界面v2,kama,office2003
  17. config.toolbar = 'MyToolbar';// 工具栏风格（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js
  18. config.toolbarCanCollapse = false;// 工具栏是否可以被收缩
  19. config.resize_enabled = false;// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js

  21. //自定义的工具栏
  22. config.toolbar_MyToolbar =
  23. [
  24. ['Source','-','Save','Preview','Print'],
  25. ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
  26. ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
  27. ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
  28. '/',
  29. ['Styles','Format'],
  30. ['Bold','Italic','Strike'],
  31. ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
  32. ['Link','Unlink','Anchor'],
  33. ['Maximize','-','About']
  34. ];
  35. }; 


/* 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，在表单提交前对其进行处理，如下：


Html代码 ​​CKEditor 3.6 入门_工具栏​​​ ​​CKEditor 3.6 入门_javascript_02CKEditor 3.6 入门_自定义_03​​


  2. <script type="text/javascript">
  3. var editor_data = CKEDITOR.instances.editor1.getData();
  4. </script> 


<script type="text/javascript">  var editor_data = CKEDITOR.instances.editor1.getData(); </script>

一个完整的例子：

Html代码 ​​CKEditor 3.6 入门_工具栏​​​ ​​CKEditor 3.6 入门_javascript_02CKEditor 3.6 入门_自定义_03​​


  2. <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
  3. <%
  4. String path = request.getContextPath();
  5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  6. %>

  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  9. <html>
  10. <head>
  11. <base href="<%=basePath%>">

  13. <title>CKEditor</title>
  14. <meta http-equiv="pragma" content="no-cache">
  15. <meta http-equiv="cache-control" content="no-cache">
  16. <meta http-equiv="expires" content="0">
  17. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  18. <meta http-equiv="description" content="This is my page">
  19. <!--
  20. <link rel="stylesheet" type="text/css" href="styles.css">
  21. -->
  22. <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
  23. </head>

  25. <body>
  26. <form id="form1" name="form1" method="post" action="display.jsp">
  27. <table width="650" height="400" border="0" align="center">
  28. <tr>
  29. <td valign="top">
  30. 内容:
  31. </td>
  32. <td>
  33. <textarea id="editor1" name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
  34. <script type="text/javascript">
  35. CKEDITOR.replace( 'editor1' );
  36. </script>
  37. </td>
  38. </tr>
  39. <tr>
  40. <td></td>
  41. <td>
  42. <input type="submit" name="Submit" value="提交" />
  43. <input type="reset" name="Reset" value="重置" />
  44. </td>
  45. </tr>
  46. </table>
  47. </form>
  48. </body>
  49. </html> 


<%@ 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>


显示结果如下：

CKEditor 3.6 入门_javascript_22