CKEditor4配置与开发详细中文说明文档

一、CKEditor4安装

安装CKEditor 是很容易的。选择合适的过程（新安装或升级），按下面描述的步骤安装。

1、新安装

第一次安装CKEditor，按如下方式进行：

1) 从CKEditor 网站：http://ckeditor.com/download下载最新版本的CKEditor 。

 2) 将下载的文档解压到你的website根目录下的ckeditor 目录中。你可以将文档放在你的website的任意路径中。ckeditor 目录是缺省目录。

2、升级

要升级现有的CKEditor 安装，按如下方式进行：
1) 将你的旧编辑文件夹更名为备份文件夹，如ckeditor_old。

2) 从CKEditor 网站：http://ckeditor.com/download下载最新版本的CKEditor 。

3) 将下载的文档解压到原编辑器的目录，如ckeditor。

4) 将你已做过更改的配置文件从备份目录复制到其新目录的相应位置。这些配置文件

可能包括（但不限于）下列文件：

oconfig.js ,

contents.css ,

styles.js

3、验证安装

CKEditor 带有样例页面，可以用于验证安装是否正常。为了查看编辑器是否工作，看一下样例目录。
要检查安装，在你的站点中调用下面的页面：
http:////samples/index.html

例如：http://www.example.com/ckeditor/samples/index.html 

二、集成

1、加载CKEditor

CKEditor 是JavaScript应用程序。要加载它，需要在页面中包含一个简单的文件引用。如果已在站点根目录下的ckeditor目录中安装了CKEditor ，你需要将下面的代码片段插入到页面的部分：


   ...

当上述文件加载后，就可以使用CKEditor JavaScript API。

当将CKEditor加入到web页面时，使用原始的文件名（ckeditor.js）。如果想使用不同的文件名，或者甚至想将CKEditor合并到另外一个JavaScript文件中，请先参考开发人员指南中的 Specifying the Editor Path部分。

生成编辑器

现在已经可以在页面中使用 CKEditor JavaScript API了，可以使用它生成编辑器。为此，有两种可用的选项：
1、框架式编辑（Framed Editing）

最常用的使用方式，通常的表现形式是在页面中指定 位置放置工具栏和编辑区。

2、内联式编辑（Inline Editing）

用于看起来像最终的页面中。通过HTML5的contenteditable（内容可编辑的）属性，可以将编辑直接应用于HTML元素上。 点击你偏爱的选项获得更多信息。

3、框架式编辑（Framed Editing）
框架式编辑是使用 CKEditor最常用的方式。它通常的表现形式是在页面中指定位置放置工具栏和编辑区。
在加载 CKEditor的脚本后，就可以准备生成编辑器了。

2、生成框架式编辑式

在框架式编辑时，CKEditor 的工作就像页面中的文本域元素。编辑器提供了用户界面，可以容易在编写、格式化，并可与富文本一起处理，但是可以用

 注意如果你想将数据加载到编辑器中，如从数据中，你需要将数据置入

3、内联式编辑（Inline Editing）

内联式编辑是一种新技术，使得可以编辑看起来像最终样子的页面。它是一种完全的“所见即所得”（WYSIWYG ）体验，因为不仅是编辑的内容看起来像最终样子，而且内容所在的页面和上下文也是这样。

启用内联式编辑

通过HTML5的contenteditable（内容可编辑的）属性，内联式编辑可以直接在HTML元素上启用。

例如，假设你想使用一个

元素可编辑。可以这样做：

   
  
Inline Editing in Action!

  
The div element that holds this text is now editable.

也可以通过代码来启用编辑，通过调用CKEDITOR.inline：

   
  
Inline Editing in Action!

  
The div element that holds this text is now editable.

当在上面的

内容中点击时，CKEditor的工具栏就是出现。

检索编辑器的数据

跟框架式编辑不同，当使用内联式编辑时，用CKEditor编辑的数据没有放在