发布于 2015-08-16 07:16:21 | 571 次阅读 | 评论: 0 | 来源: PHPERZ
CKEditor 是 JavaScript 应用程序。要加载它，需要在页面中包含一个简单的文件引用。
如果已在站点根目录下的 ckeditor 目录中安装了 CKEditor ， 你需要将下面的代码片段插入到页面的<head>部分：
<head> ... <script src="/ckeditor/ckeditor.js"></script> </head>
当上述文件加载后，就可以使用 CKEditor JavaScript API。
当将 CKEditor 加入到 web 页面时，使用原始的文件名（ckeditor.js） 。如果想使用不同的文件名，或者甚至想将 CKEditor 合并到另外一个 JavaScript 文件中，请先参考开发人员指南中的 Specifying the Editor Path 部分。
现在已经可以在页面中使用 CKEditor JavaScript API 了， 可以使用它生成编辑器。 为此，有两种可用的选项：
框架式编辑是使用 CKEditor 最常用的方式。它通常的表现形式是在页面中指定位置放置工具栏和编辑区。在加载 CKEditor 的脚本后，就可以准备生成编辑器了。
在框架式编辑时，CKEditor 的工作就像页面中的文本域元素。编辑器提供了用户界面，可以容易在编写、格式化，并可与富文本一起处理，但是可以用<textarea>元素完成同样的事情（尽管不是那么容易） ，需要用户在其中输入 HTML 代码。
实际上，CKEditor 使用文本域将其数据传给服务器。对于终端用来来说，文本域是不可见的。为了生成编辑器的实例，必须首先将<textarea>元素加入到 HTML 页面的源代码中。
<textarea name="editor1"><p>Initial value.</p>;</textarea>
注 意如果你想将数据加载到编辑器中，如从数据中，你需要将数据置入<textarea>元素中，就像上面例子中 HTML 编码的<p>元素一样。在此例中，文本域被命名为 editor1。在后面当收到提交的数据后，可以将此名字用于服务器端的代码中。
插入文本域后，就可以使用 CKEditor JavaScript API 将 HTML 元素替换为编辑器的实例。为此，需要调用简单的 CKEDITOR.replace 方法：
<script> CKEDITOR.replace( 'editor1' ); </script>
此脚本块必须被包含在<textarea>标记后的页面源代码的任意位置。你也可以在<head>部分调用 replace 函数，但此时需要监听 window.onload 事件：
<script>
window.onload = function() {
CKEDITOR.replace( 'editor1' );
};
</script>
如上所述，编辑器的工作方式类似于<textarea>域。这意味着当提交包含编辑器实例的表单时，数据将很简单地提交，使用<textarea>元素名作为键来检查它。
例如，接着上面的例子，我们可以生成下面的 PHP 代码：
<?php $editor_data = $_POST[ 'editor1' ]; ?>
一些应用程序（如基于 Ajax 的）需要在客户端处理所有的数据，用其特定的方法将数据发给服务器。如果是这样，使用 CKEditor JavaScript API 就足以很容易地检索编辑器实例的
数据。为此，你可以使用 getData 方法：
<script> var editor_data = CKEDITOR.instances.editor1.getData(); </script>
要插入一个CKEditor实例， 可以使用下面的样例来生成一个页面， 它包含一个用CKEditor替换过的表单。
<html> <head> <title>CKEditor Sample</title> <script src="/ckeditor/ckeditor.js"></script> </head> <body> <form method="post"> <p> My Editor:<br> <textarea name="editor1"><p>Initial value.</p></textarea> <script> CKEDITOR.replace( 'editor1' ); </script> </p> <p> <input type="submit"> </p> </form> </body> </html>
内联式编辑是一种新技术， 使得可以编辑看起来像最终样子的页面。 它是一种完全的 “所见即所得”（WYSIWYG ）体验，因为不仅是编辑的内容看起来像最终样子，而且内容所在的页面和上下文也是这样。
通过 HTML5 的 contenteditable（内容可编辑的）属性，内联式编辑可以直接在 HTML元素上启用。
例如，假设你想使用一个<div>元素可编辑。可以这样做：
<div id="editable" contenteditable="true"> <h1>Inline Editing in Action!</h1> <p>The div element that holds this text is now editable. </div>
也可以通过代码来启用编辑，通过调用 CKEDITOR.inline：
<div id="editable" contenteditable="true"> <h1>Inline Editing in Action!</h1> <p>The div element that holds this text is now editable. </div> <script> // Turn off automatic editor creation first. CKEDITOR.disableAutoInline = true; CKEDITOR.inline( 'editable' ); </script>
当在上面的<div>内容中点击时，CKEditor 的工具栏就是出现。
跟框架式编辑不同，当使用内联式编辑时，用 CKEditor 编辑的数据没有放在<textarea>中， 而是直接存在于页面的 DOM 中。 因此， 应用程序就要完成检查数据和存储所需的操作。
要检查编辑器的数据，简单地调用编辑器实例的 CKEDITOR.editor.getData 方法。对于上面的例子，如下：
<script> var data = CKEDITOR.instances.editable.getData(); // Your code to save "data", usually though Ajax. </script>
注意为了检索编辑器实例，最初的<div> id 已传给了 CKEDITOR.instances 对象。