<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>
3、内联式编辑（Inline Editing）
内联式编辑是一种新技术，使得可以编辑看起来像最终样子的页面。它是一种完全的“所见即所得”（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.</p> </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对象。
三、配置
1、设置CKEditor 的配置
CKEditor 具有丰富的一组配置选项，可以定制其外观、功能和行为。主配置文件名字为config.js。此文件可以在CKEditor 安装文件夹的根目录中找到。