主頁(yè) > 知識(shí)庫(kù) > CKEditor/FCKEditor 使用FCKeditor 2.6.5 快速使用教程(含插入圖片)

CKEditor/FCKEditor 使用FCKeditor 2.6.5 快速使用教程(含插入圖片)

熱門標(biāo)簽:美圖手機(jī) 服務(wù)器配置 智能手機(jī) 網(wǎng)站文章發(fā)布 呼叫中心市場(chǎng)需求 鐵路電話系統(tǒng) 銀行業(yè)務(wù) 檢查注冊(cè)表項(xiàng)
其開源協(xié)議是基于 GPL, LGPL 和 MPL 的。官方網(wǎng)站:http://ckeditor.com/

一般來說,我們?cè)诰庉媰?nèi)容時(shí),先是讀入到 textarea,再將 textarea 的內(nèi)容賦給編輯器。因?yàn)橹苯影褍?nèi)容作為字符串給編輯器的 Value 屬性賦值使用的是 JavaScript 代碼,要讓 JS 代碼不受內(nèi)容中雙引號(hào)、換行等的干擾,只有先讀入到 textarea 最方便。

使用 FCKeditor 2.6.5
復(fù)制代碼 代碼如下:

div>textarea id="fckcontent" name="content">cftea/textarea>/div>
script type="text/javascript" src="fckeditor/fckeditor.js">/script>
script type="text/javascript">
!--
var oFCKeditor = new FCKeditor("fckcontent");
oFCKeditor.BasePath = "fckeditor/"; // fckeditor 文件夾位置。
oFCKeditor.Create();
//-->
/script>

本來應(yīng)該用 display:none 將 textarea 隱藏起來,不過為了查看效果,這里不隱藏。

這樣編輯器就自動(dòng)與 fckcontent 關(guān)聯(lián)起來了,打開網(wǎng)頁(yè)時(shí) FCKeditor 自動(dòng)讀取 textarea 的內(nèi)容,提交時(shí)又自動(dòng)將其內(nèi)容(自動(dòng)為 XHTML)賦給 textarea。

注意,我們 textarea 的 id 和 name 值不一樣,為什么呢?

這里應(yīng)該是這個(gè)版本不太完善的地方,如果我們把 textarea 的 id 和 name 值設(shè)置為一樣,那么 FCKeditor 文本區(qū)的 name 值也是 content,在服務(wù)器端 Request.Form("content").Count 就會(huì)有兩個(gè),我們服務(wù)器端取值就稍稍有點(diǎn)不方便,得用 Request.Form("content")(0)。如果我們將 id 設(shè)為 fckcontent,那么 FCKeditor 文本區(qū)的 name 就是 fckcontent,與 textarea 不同名。

設(shè)置編輯器寬高

var oFCKeditor = new FCKeditor("fckcontent", 500, 300);

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

var oFCKeditor = new FCKeditor("fckcontent");
oFCKeditor.Width = 500;
oFCKeditor.Height = 300;

設(shè)置工具條

var oFCKeditor = new FCKeditor("fckcontent", 500, 300, "Basic");
注意第四個(gè)參數(shù),其可選值有 Basic、Default,注意大小寫不可搞錯(cuò),分別表示基本工具條、默認(rèn)工具條(全部按鈕)。

設(shè)置初始值、設(shè)置值、取值

設(shè)置初始值

實(shí)際上設(shè)置初始值很少用,因?yàn)橐话愣际桥c textarea 關(guān)聯(lián)的,故只是簡(jiǎn)單列出來一下,不深究。說明一下,如果關(guān)聯(lián)的 textarea 存在,則賦初始值是沒有用的。

var oFCKeditor = new FCKeditor("fckcontent2", 500, 300, "Default", "腳本之家");

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

var oFCKeditor = new FCKeditor("fckcontent2", 500, 300, "Default");
oFCKeditor.BasePath = "fckeditor/";
oFCKeditor.Value = "cftea"; // 必須在 Create 之前
oFCKeditor.Create();

設(shè)置值

若要演示此示例,最好是放在按鈕的事件處理程序中,目的是有些延遲,否則會(huì)說 FCKeditorAPI 未定義。
復(fù)制代碼 代碼如下:

var oEditor = FCKeditorAPI.GetInstance("fckcontent");
oEditor.SetHTML("腳本之家");

取值

若要演示此示例,最好是放在按鈕的事件處理程序中,目的是有些延遲,否則會(huì)說 FCKeditorAPI 未定義。
復(fù)制代碼 代碼如下:

var oEditor = FCKeditorAPI.GetInstance("fckcontent");
alert(oEditor.GetXHTML()); // 還有個(gè)類似方法是 GetHTML,但不推薦用 GetHTML。

您這樣做很危險(xiǎn):
復(fù)制代碼 代碼如下:

var oEditor = FCKeditorAPI.GetInstance("fckcontent");
oEditor.SetHTML("腳本之家");
alert(oEditor.GetXHTML()); // 這里的值并不一定是上一句賦的值。因?yàn)樗麄兲?,值還沒來得及賦,就已經(jīng) alert 了。

插入圖片

若要演示此示例,最好是放在按鈕的事件處理程序中,目的是有些延遲,否則會(huì)說 FCKeditorAPI 未定義。

FCKeditorAPI.GetInstance("fckcontent").InsertHtml("img src...>");

標(biāo)簽:長(zhǎng)治 新疆 河南 滄州 紅河 樂山 上海 沈陽(yáng)

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《CKEditor/FCKEditor 使用FCKeditor 2.6.5 快速使用教程(含插入圖片)》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266