CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程(含插入圖片)
更新時(shí)間:2010年03月20日 20:56:17 作者:
一般來說,我們?cè)诰庉媰?nèi)容時(shí),先是讀入到 textarea,再將 textarea 的內(nèi)容賦給編輯器。
因?yàn)橹苯影褍?nèi)容作為字符串給編輯器的 Value 屬性賦值使用的是 JavaScript 代碼,要讓 JS 代碼不受內(nèi)容中雙引號(hào)、換行等的干擾,只有先讀入到 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 版本的使用非常方便,也不用擔(dān)心會(huì)形成兩個(gè)同名的 content。實(shí)際上 textarea 的 id 省略了也是可以的,因?yàn)?CKEditor 會(huì)先按 name 來查找,查找不到,再按 id 來查找。
并且編輯器會(huì)在 textarea 的位置替換原有的 textarea。
設(shè)置編輯器皮膚、寬高
<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è)文件夾名稱,如果指向不存在的皮膚,則不會(huì)顯示編輯器。
設(shè)置值、取值
設(shè)置值
CKEDITOR.instances.content.setData("腳本之家"); // content 就是前面 CKEDITOR.replace 的第一個(gè)參數(shù)值
或
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=...>");
使用 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 來查找,查找不到,再按 id 來查找。
并且編輯器會(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è)文件夾名稱,如果指向不存在的皮膚,則不會(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=...>");
您可能感興趣的文章:
- 解決FCKEditor在IE10、IE11下的不兼容問題
- FCKeditor使用方法(FCKeditor_2.6.3)詳細(xì)使用說明
- asp.net+FCKeditor上傳圖片顯示叉叉圖片無法顯示的問題的解決方法
- 修改fckeditor的文件上傳功能步驟
- ckeditor的使用和配置方法分享
- ASP FCKeditor在線編輯器使用方法
- 整合ckeditor+ckfinder,解決上傳文件路徑問題
- FckEditor 配置手冊(cè)中文教程詳細(xì)說明
- asp.net CKEditor和CKFinder的應(yīng)用
- PHP CKEditor 上傳圖片實(shí)現(xiàn)代碼
- CKEditor網(wǎng)頁編輯器 中文使用說明
- FCKeditor2.3 For PHP 詳細(xì)整理的使用參考
- javascript獲取ckeditor編輯器的值(實(shí)現(xiàn)代碼)
- asp.net ckeditor編輯器的使用方法
- 通過Fckeditor把圖片上傳到獨(dú)立圖片服務(wù)器的方法
- 關(guān)于CKeditor的非主流個(gè)性應(yīng)用的設(shè)置
- asp中的ckEditor的詳細(xì)配置小結(jié)
- CKEditor4配置與開發(fā)詳細(xì)中文說明文檔
相關(guān)文章
KindEditor 4.x 在線編輯器常用方法小結(jié)
要修改默認(rèn)后臺(tái)程序處理文件,修改plugins(插件文件夾)下的JavaScript內(nèi)容fileManagerJson改為自己使用程序語言2011-11-11eWebEditor 輯器按鈕失效 IE8下eWebEditor編輯器無法使用的解決方法
最近我把IE瀏覽器更新到了IE8.0,在用eWebEditor在線HTML文本編輯器的時(shí)候點(diǎn)擊eWebEditor上的所有編輯按鈕都沒用,只看到瀏覽器狀態(tài)欄左下角顯示網(wǎng)頁上有錯(cuò)誤,于是上網(wǎng)查了一下。終于找到解決的方法,測(cè)試后正常。2009-06-06FCKeditor提供了一個(gè)完整的JavaScript API
FCKeditor提供了一個(gè)完整的JavaScript API(Application Public Interface),你可以利用這些API來處理FCK編輯器,只要它被加載完成或在正在運(yùn)行中.2009-12-12FCKeditor編輯器添加圖片上傳功能及圖片路徑問題解決方法
現(xiàn)在很多CMS系統(tǒng)因?yàn)榘踩驎?huì)把后臺(tái)編輯器里的上傳功能給去除,但這樣一來對(duì)實(shí)際使用過程造成了很多麻煩,今天我們以ASPCMS系統(tǒng)的FCKeditor編輯器為例,說明一下如何增加圖片上傳功能2014-04-04百度編輯器從Json對(duì)象中取值,完成初次渲染,在編輯器內(nèi)畫表格
在百度編輯器中,如何完成從服務(wù)器取值,來渲染出表格?這里需要先console.log(editor);在官方API中已經(jīng)告訴我們寫入的方法是setContent(),這里只要能傳入我們最終拼好的的字符串,即可以在初始化中,繪制出我們想要的任何節(jié)點(diǎn)2012-06-06自己打造HTML在線編輯器的實(shí)現(xiàn)難點(diǎn)分析
到目前為止,我已經(jīng)開發(fā)了兩個(gè)HTML編輯器了,一個(gè)用在公司的CMS項(xiàng)目,另一個(gè)用在這個(gè)Blog(TidyEditor,暫時(shí)沒有單獨(dú)發(fā)布)。下面總結(jié)一下開發(fā)的難點(diǎn)以及應(yīng)對(duì)方法。2011-03-03