ckeditor 4 开发人员指南


1 CKEditor 4 开发人员指南 本文由 Jack Soong 根据英文版 CKEditor 4 Developer's Guide 进行翻译,希望对使用 CkEditor 4 的开发人员有所帮助。2013.04.09 一、安装 安装 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) 将你已做过更改的配置文件从备份目录复制到其新目录的相应位置。这些配置文件 可能包括(但不限于)下列文件: o config.js o contents.css o styles.js 3、验证安装 CKEditor 带有样例页面,可以用于验证安装是否正常。为了查看编辑器是否工作,看一 下样例目录。 要检查安装,在你的站点中调用下面的页面: http:////samples/index.html 例如:http://www.example.com/ckeditor/samples/index.html 二、集成 1、加载 CKEditor CKEditor 是 JavaScript 应用程序。要加载它,需要在页面中包含一个简单的文件引用。 如果已在站点根目录下的 ckeditor 目录中安装了 CKEditor ,你需要将下面的代码片段插入到 页面的部分: ... 2 当上述文件加载后,就可以使用 CKEditor JavaScript API。 当将 CKEditor 加入到 web 页面时,使用原始的文件名(ckeditor.js)。如果想使用不同的 文件名,或者甚至想将 CKEditor 合并到另外一个 JavaScript 文件中,请先参考开发人员指南 中的 Specifying the Editor Path 部分。 生成编辑器 现在已经可以在页面中使用 CKEditor JavaScript API 了,可以使用它生成编辑器。为此, 有两种可用的选项:  框架式编辑(Framed Editing):最常用的使用方式,通常的表现形式是在页面中指定 位置放置工具栏和编辑区。  内联式编辑(Inline Editing):用于看起来像最终的页面中。通过 HTML5 的 contenteditable(内容可编辑的)属性,可以将编辑直接应用于 HTML 元素上。 点击你偏爱的选项获得更多信息。 2、框架式编辑(Framed Editing) 框架式编辑是使用 CKEditor 最常用的方式。它通常的表现形式是在页面中指定位置放 置工具栏和编辑区。 在加载 CKEditor 的脚本后,就可以准备生成编辑器了。 生成框架式编辑式 在框架式编辑时,CKEditor 的工作就像页面中的文本域元素。编辑器提供了用户界面, 可以容易在编写、格式化,并可与富文本一起处理,但是可以用 注意如果你想将数据加载到编辑器中,如从数据中,你需要将数据置入

3、内联式编辑(Inline Editing) 内联式编辑是一种新技术,使得可以编辑看起来像最终样子的页面。它是一种完全的“所 见即所得”(WYSIWYG )体验,因为不仅是编辑的内容看起来像最终样子,而且内容所在 的页面和上下文也是这样。 启用内联式编辑 通过 HTML5 的 contenteditable(内容可编辑的)属性,内联式编辑可以直接在 HTML 元素上启用。 4 例如,假设你想使用一个
元素可编辑。可以这样做:

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 编辑的数据没有放在