CKEditor 是著名的 HTML 編輯器，IBM、Oracle、Adobe 等都在用。CKEditor 創建於 2003 年，其前身為 FCKEditor，在 2009 年的時候把“F”去掉了，更名為 CKEditor。其開源協議是基於 GPL, LGPL 和 MPL 的。官方網站：http://ckeditor.com/

一般來說，我們在編輯內容時，先是讀入到 textarea，再將 textarea 的內容賦給編輯器。因為直接把內容作為字串給編輯器的 Value 屬性賦值使用的是 JavaScript 程式碼，要讓 JS 程式碼不受內容中雙引號、換行等的干擾，只有先讀入到 textarea 最方便。

 使用 CKeditor 3.0.1

<textarea  cols="90" rows="10" id="content" name="content">cftea</textarea>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
    CKEDITOR.replace("content");
//-->
</script>

可以看出，3.x 版本的使用非常方便，也不用擔心會形成兩個同名的 content。實際上 textarea 的 id 省略了也是可以的，因為 CKEditor 會先按 name 來查詢，查詢不到，再按 id 來查詢。

並且編輯器會在 textarea 的位置替換原有的 textarea。

 設定編輯器面板、寬高

<textarea  cols="90" rows="10" id="content" name="content">cftea</textarea>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
    CKEDITOR.replace("content",
      {
          skin: "kama", width:700, height:300
      });
//-->
</script>

skin 值應該是 ckeditor/skins 資料夾下的某個資料夾名稱，如果指向不存在的面板，則不會顯示編輯器。

 設定值、取值

設定值

CKEDITOR.instances.content.setData("輸入文字"); // content 就是前面 CKEDITOR.replace 的第一個引數值

或

var editor = CKEDITOR.replace("content");
editor.setData("輸入文字");

取值

alert(CKEDITOR.instances.content.getData()); // content 就是前面 CKEDITOR.replace 的第一個引數值

或

var editor = CKEDITOR.replace("content");
alert(editor.getData());

 插入圖片

若要演示此示例，最好是放在按鈕的事件處理程式中，目的是有些延遲。

CKEDITOR.instances.content.insertHtml("<img src=...>");