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

2024-09-06 19:16:43

字體：大中小

供稿：網(wǎng)友

因?yàn)橹苯影褍?nèi)容作為字符串給編輯器的 Value 屬性賦值使用的是 JavaScript 代碼，要讓 JS 代碼不受內(nèi)容中雙引號(hào)、換行等的干擾，只有先讀入到 textarea 最方便。

使用 CKeditor 3.0.1

復(fù)制代碼代碼如下:

 
<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 版本的使用非常方便，也不用擔(dān)心會(huì)形成兩個(gè)同名的 content。實(shí)際上 textarea 的 id 省略了也是可以的，因?yàn)?CKEditor 會(huì)先按 name 來(lái)查找，查找不到，再按 id 來(lái)查找。

并且編輯器會(huì)在 textarea 的位置替換原有的 textarea。

設(shè)置編輯器皮膚、寬高

復(fù)制代碼代碼如下:

 
<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 值應(yīng)該是 ckeditor/skins 文件夾下的某個(gè)文件夾名稱(chēng)，如果指向不存在的皮膚，則不會(huì)顯示編輯器。

設(shè)置值、取值

設(shè)置值

CKEDITOR.instances.content.setData("武林網(wǎng)"); // content 就是前面 CKEDITOR.replace 的第一個(gè)參數(shù)值
或

復(fù)制代碼代碼如下:

 
var editor = CKEDITOR.replace("content"); 
editor.setData("武林網(wǎng)"); 

取值

alert(CKEDITOR.instances.content.getData()); // content 就是前面 CKEDITOR.replace 的第一個(gè)參數(shù)值
或

var editor = CKEDITOR.replace("content");
alert(editor.getData());
插入圖片

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

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

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

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