3、框架式编辑（Framed Editing）
框架式编辑是使用 CKEditor最常用的方式。它通常的表现形式是在页面中指定位置放置工具栏和编辑区。
在加载 CKEditor的脚本后，就可以准备生成编辑器了。
2、生成框架式编辑式
在框架式编辑时，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替换过的表单。