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

更新時(shí)間：2010年03月20日 20:56:17 作者：

一般來(lái)說(shuō)，我們?cè)诰庉媰?nèi)容時(shí)，先是讀入到 textarea，再將 textarea 的內(nèi)容賦給編輯器。

因?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("腳本之家"); // content 就是前面 CKEDITOR.replace 的第一個(gè)參數(shù)值
或

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

 
var editor = CKEDITOR.replace("content"); 
editor.setData("腳本之家"); 

取值

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

fckeditor在ie9中無(wú)法彈出對(duì)話(huà)框的解決方法(彈出層兼容問(wèn)題)
升級(jí)到 IE 9后，fckeditor在IE 9里的彈出浮動(dòng)層會(huì)出現(xiàn)bug，里面的內(nèi)容不會(huì)出現(xiàn)
2012-04-04
asp.net CKEditor和CKFinder的應(yīng)用
CKEditor和CKFinder在ASP.NET中的應(yīng)用,需要的朋友可以參考下。
2010-01-01
Ewebeditor 文件上傳問(wèn)題
Ewebeditor 上傳的文件要么是直接播放或顯示的，要么是用固定的格式做一個(gè)鏈接。
2009-07-07
SyntaxHighlighter 語(yǔ)法高亮插件的使用教程
現(xiàn)在做it編程類(lèi)信息的網(wǎng)站，提供的源碼如果能提供代碼高亮對(duì)代碼的閱讀效果會(huì)提高不少。
2010-02-02
解密FCKeditor 2.0 的設(shè)置.修改.使用方法
解密FCKeditor 2.0 的設(shè)置.修改.使用方法...
2007-11-11
自己打造HTML在線(xiàn)編輯器的實(shí)現(xiàn)難點(diǎn)分析
到目前為止，我已經(jīng)開(kāi)發(fā)了兩個(gè)HTML編輯器了，一個(gè)用在公司的CMS項(xiàng)目，另一個(gè)用在這個(gè)Blog（TidyEditor，暫時(shí)沒(méi)有單獨(dú)發(fā)布）。下面總結(jié)一下開(kāi)發(fā)的難點(diǎn)以及應(yīng)對(duì)方法。
2011-03-03
百度UEditor修改右下角統(tǒng)計(jì)字?jǐn)?shù)包含html樣式
百度UEditor修改右下角統(tǒng)計(jì)字?jǐn)?shù)默認(rèn)只統(tǒng)計(jì)前臺(tái)所見(jiàn)的文字個(gè)數(shù)，如何讓右下角統(tǒng)計(jì)字?jǐn)?shù)包含html樣式，需要的朋友可以參考下
2014-07-07
FCKeditor編輯器添加圖片上傳功能及圖片路徑問(wèn)題解決方法
現(xiàn)在很多CMS系統(tǒng)因?yàn)榘踩驎?huì)把后臺(tái)編輯器里的上傳功能給去除，但這樣一來(lái)對(duì)實(shí)際使用過(guò)程造成了很多麻煩，今天我們以ASPCMS系統(tǒng)的FCKeditor編輯器為例，說(shuō)明一下如何增加圖片上傳功能
2014-04-04
jsp fckeditor 上傳中文圖片亂碼問(wèn)題的解決方法
徹底解決fckeditor(jsp版)上傳中文圖片亂碼問(wèn)題，我這里用的編碼是utf-8的，這里用的fckeditor 是2.6的，fckeditor.java包是2.3的
2009-02-02
fckeditor 代碼語(yǔ)法高亮
這兩個(gè)星期有點(diǎn)空，就再研究了一下語(yǔ)法高亮的問(wèn)題，找了一下FCKeditor官方網(wǎng)站，發(fā)現(xiàn)2.5.1穩(wěn)定版已經(jīng)出來(lái)了，首先替換掉舊的2.0。呵呵，我喜歡使用新版。
2009-06-06