CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程（含插入圖片）

2024-09-06 19:16:43

字體：大中小

來源：轉載

供稿：網友

因為直接把內容作為字符串給編輯器的 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=...>");

上一篇：CKEditor/FCKEditor 使用FCKeditor 2.6.5 快速使用教程（含插入圖片）

下一篇：FCKEditor 自定義用戶目錄的修改步驟 (附源碼)