CKEditor/FCKEditor 使用-CKeditor 3.0.1 快速教程(含插入圖片)

作者:vkvi 來源:千一網絡(原創) 日期:2009-11-30

CKEditor 是著名的 HTML 編輯器,IBM、Oracle、Adobe 等都在用。CKEditor 創建于 2003 年,其前身為 FCKEditor,在 2009 年的時候把“F”去掉了,更名為 CKEditor。其開源協議是基于 GPL, LGPL 和 MPL 的。官方網站:http://ckeditor.com/

一般來說,我們在編輯內容時,先是讀入到 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 的第一個參數值

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=...>");

你前面那位網友看了:TextBox-AppendText 與 .Text += 有何區別?

▲▲▲嘿,歡迎轉載傳播本站原創文章,盡量保留來源噢。▲▲▲

文章評論
  • 1 樓:評論
    good 幫我大忙了
  • 2 樓:評論
    支持
  • 3 樓:評論
  • 4 樓:評論
    fasdfa
  • 5 樓:評論
    不錯,給了我提示,換了中方式實現了效果
  • 6 樓:評論
    有沒有在頁面中切換皮膚的功能啊.....
標題:必填
內容:
本站永遠終止與捏造“罪名”不支付廣告費的某度聯盟合作。
vkvi
vkvi

作者簡介: vkvi,致力于 .NET Web 開發、移動開發的技術推廣,在 .NET、SQL Server、Windows Server 等方面有深入研究和豐富經驗,10 年間共計撰寫文章 4000 余篇。 主持金融、國土、農業、電商等多個行業項目執行, 推行“技術提升生產力、人心決定成功率”的管理理論。 聯系他

最新22选5开奖公告