CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程（含插入圖片）
更新時間：2010年03月20日 20:56:17 作者：
一般來說，我們在編輯內容時，先是讀入到 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 的第一個參數(shù)值
或
var editor = CKEDITOR.replace("content");
editor.setData("腳本之家");
取值
alert(CKEDITOR.instances.content.getData()); // content 就是前面 CKEDITOR.replace 的第一個參數(shù)值
或
var editor = CKEDITOR.replace("content");
alert(editor.getData());
插入圖片
若要演示此示例，最好是放在按鈕的事件處理程序中，目的是有些延遲。
CKEDITOR.instances.content.insertHtml("<img src=...>");
使用 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 的第一個參數(shù)值
或
復制代碼 代碼如下:
var editor = CKEDITOR.replace("content");
editor.setData("腳本之家");
取值
alert(CKEDITOR.instances.content.getData()); // content 就是前面 CKEDITOR.replace 的第一個參數(shù)值
或
var editor = CKEDITOR.replace("content");
alert(editor.getData());
插入圖片
若要演示此示例，最好是放在按鈕的事件處理程序中，目的是有些延遲。
CKEDITOR.instances.content.insertHtml("<img src=...>");
您可能感興趣的文章:
- 解決FCKEditor在IE10、IE11下的不兼容問題
- FCKeditor使用方法(FCKeditor_2.6.3)詳細使用說明
- asp.net+FCKeditor上傳圖片顯示叉叉圖片無法顯示的問題的解決方法
- 修改fckeditor的文件上傳功能步驟
- ckeditor的使用和配置方法分享
- ASP FCKeditor在線編輯器使用方法
- 整合ckeditor+ckfinder，解決上傳文件路徑問題
- FckEditor 配置手冊中文教程詳細說明
- asp.net CKEditor和CKFinder的應用
- PHP CKEditor 上傳圖片實現(xiàn)代碼
- CKEditor網(wǎng)頁編輯器 中文使用說明
- FCKeditor2.3 For PHP 詳細整理的使用參考
- javascript獲取ckeditor編輯器的值(實現(xiàn)代碼)
- asp.net ckeditor編輯器的使用方法
- 通過Fckeditor把圖片上傳到獨立圖片服務器的方法
- 關于CKeditor的非主流個性應用的設置
- asp中的ckEditor的詳細配置小結
- CKEditor4配置與開發(fā)詳細中文說明文檔
相關文章
fckeditor在ie9中無法彈出對話框的解決方法(彈出層兼容問題)
升級到 IE 9后，fckeditor在IE 9里的彈出浮動層會出現(xiàn)bug，里面的內容不會出現(xiàn)2012-04-04
CKEditor和CKFinder在ASP.NET中的應用,需要的朋友可以參考下。2010-01-01
Ewebeditor 上傳的文件要么是直接播放或顯示的，要么是用固定的格式做一個鏈接。2009-07-07
現(xiàn)在做it編程類信息的網(wǎng)站，提供的源碼如果能提供代碼高亮對代碼的閱讀效果會提高不少。2010-02-02
解密FCKeditor 2.0 的設置.修改.使用方法...2007-11-11
到目前為止，我已經(jīng)開發(fā)了兩個HTML編輯器了，一個用在公司的CMS項目，另一個用在這個Blog（TidyEditor，暫時沒有單獨發(fā)布）。下面總結一下開發(fā)的難點以及應對方法。2011-03-03
百度UEditor修改右下角統(tǒng)計字數(shù)包含html樣式
百度UEditor修改右下角統(tǒng)計字數(shù)默認只統(tǒng)計前臺所見的文字個數(shù)，如何讓右下角統(tǒng)計字數(shù)包含html樣式，需要的朋友可以參考下2014-07-07
FCKeditor編輯器添加圖片上傳功能及圖片路徑問題解決方法
現(xiàn)在很多CMS系統(tǒng)因為安全原因會把后臺編輯器里的上傳功能給去除，但這樣一來對實際使用過程造成了很多麻煩，今天我們以ASPCMS系統(tǒng)的FCKeditor編輯器為例，說明一下如何增加圖片上傳功能2014-04-04
徹底解決fckeditor(jsp版)上傳中文圖片亂碼問題，我這里用的編碼是utf-8的，這里用的fckeditor 是2.6的，fckeditor.java包是2.3的2009-02-02
這兩個星期有點空，就再研究了一下語法高亮的問題，找了一下FCKeditor官方網(wǎng)站，發(fā)現(xiàn)2.5.1穩(wěn)定版已經(jīng)出來了，首先替換掉舊的2.0。呵呵，我喜歡使用新版。2009-06-06