安裝
安裝CKEditor是一件容易的工作，只需要按照下面的簡(jiǎn)單步驟就可以完成。
1.從我們的網(wǎng)站https://www.jb51.net/codes/21295.html上下載CKEditor的最新版本。
2.將下載的文件解壓到你網(wǎng)站目錄下的“ckeditor”文件夾里。
注意：你也可以將這些文件放在你網(wǎng)站的任何一個(gè)地方，默認(rèn)為“ckeditor”。
測(cè)試你的安裝
編輯器附帶有一些用來(lái)驗(yàn)證安裝結(jié)果是否能正常運(yùn)行的簡(jiǎn)單的例子網(wǎng)頁(yè)，請(qǐng)查看“_samples”目錄。訪問(wèn)如下的地址進(jìn)行測(cè)試：
http://你的網(wǎng)站域名>/CKEditor 安裝路徑>/_samples/index.html
例如：
http://www.example.com/ckeditor/_samples/index.html
集成
有苦干個(gè)方式能將CKEditor集成到你的網(wǎng)頁(yè)中，在這里介紹最常用的實(shí)現(xiàn)方法。
第一步：載入CKEditor
CKEditor 是一個(gè)JavaScript 應(yīng)用程序，你只需要在你的網(wǎng)頁(yè)中包含一個(gè)文件引用就能加載它。如果你已經(jīng)將CKEditor安裝在了你網(wǎng)站的“ckeditor”目錄，你可參照如下示例：
復(fù)制代碼 代碼如下:
head>
...
script type="text/javascript" src="/ckeditor/ckeditor.js">/script>
/head>
用以上方式加載，CKEditor JavaScript API 就準(zhǔn)備就緒，可以使用了。
第二步：創(chuàng)建一個(gè)編輯器實(shí)例
CKEditor就像一個(gè)在你網(wǎng)頁(yè)中的文本區(qū)域（textarea）一樣工作，它提供了一個(gè)簡(jiǎn)單易寫(xiě)的用戶界面、版式和豐富的文字輸入?yún)^(qū)域，但用文本區(qū)域要實(shí)現(xiàn)同樣的效果，并不容易，它需要用戶輸入html代碼。
但是，實(shí)際上，CKEditor仍然是使用一個(gè)文本區(qū)域來(lái)傳遞它的數(shù)據(jù)到服務(wù)器上，這個(gè)文本區(qū)域?qū)κ褂谜邅?lái)說(shuō)是不可見(jiàn)的，所以，你必需創(chuàng)建并編輯一個(gè)實(shí)例,首先創(chuàng)建一個(gè)實(shí)例：
textarea name="editor1">lt;pgt;Initial value.lt;/pgt;/textarea>
注意，如果你想要加載一些數(shù)據(jù)到編輯器中，例如從數(shù)據(jù)庫(kù)中讀出數(shù)據(jù)，只需要把數(shù)據(jù)放在文本區(qū)域（textarea）內(nèi)就可以了，就像上面的例子一樣。在這個(gè)例子中，我們已經(jīng)將文本區(qū)域（textarea）命名這“editor1”.當(dāng)接收POST提交的數(shù)據(jù)時(shí)，這個(gè)名字將被用在服務(wù)器操作?，F(xiàn)在，開(kāi)始使用CKEditor Javascript API,我們用一個(gè)編輯器實(shí)例來(lái)“替換（replace）”這個(gè)普通的文本區(qū)域（textarea），為此一段JavaScript命令是必須的：
復(fù)制代碼 代碼如下:
script type="text/javascript">
CKEDITOR.replace( 'editor1' );
/script>
上面的腳本塊只能包含在網(wǎng)頁(yè)的textarea>標(biāo)簽之后。也可以在head>標(biāo)簽內(nèi)運(yùn)行這個(gè)替換過(guò)程，但是在這種情況下你需要對(duì)“window.onload”事件進(jìn)行監(jiān)聽(tīng)：
復(fù)制代碼 代碼如下:
script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'editor1' );
};
/script>
第三步：保存編輯器內(nèi)容數(shù)據(jù)
按照先前的描述，編輯器正如一個(gè)文本區(qū)域（textarea）一樣工作，所以，當(dāng)提交一個(gè)包含一個(gè)編輯器實(shí)例的表單時(shí)，他的數(shù)據(jù)也將是很簡(jiǎn)單的傳遞，用文本區(qū)域（textarea）的名稱作為健名來(lái)接收數(shù)據(jù)。舉個(gè)例子，按照上面的例子，在PHP中我們需要像這樣來(lái)處理數(shù)據(jù)：
復(fù)制代碼 代碼如下:
?php
$editor_data = $_POST[ 'editor1' ];
?>
客戶端數(shù)據(jù)處理
一些用應(yīng)中（如ajax應(yīng)用）需要在客戶端處理完所有的數(shù)據(jù)，然后用它自己的方式向服務(wù)器發(fā)送數(shù)據(jù)，在這些情況下，使用CKEditor API就足以輕松獲取編輯器實(shí)例中的內(nèi)容。例 如：
復(fù)制代碼 代碼如下:
script type="text/javascript">
var editor_data = CKEDITOR.instances.editor1.getData();
/script>
完整例子
復(fù)制代碼 代碼如下:
html>
head>
title>Sample - CKEditor/title>
script type="text/javascript" src="/ckeditor/ckeditor.js">/script>
/head>
body>
form method="post">
p>
My Editor:br />
textarea name="editor1">lt;pgt;Initial value.lt;/pgt;/textarea>
script type="text/javascript">
CKEDITOR.replace( 'editor1' );
/script>
/p>
p>
input type="submit" />
/p>
/form>
/body>
/html>
您可能感興趣的文章:- CKEditor4配置與開(kāi)發(fā)詳細(xì)中文說(shuō)明文檔
- 網(wǎng)頁(yè)編輯器FCKeditor 2.6.4精簡(jiǎn)配置方法
- php版本CKEditor 4和CKFinder安裝及配置方法圖文教程
- 手把手教你 CKEDITOR 4 擴(kuò)展插件制作
- 手把手教你 CKEDITOR 4 實(shí)現(xiàn)Dialog 內(nèi)嵌 IFrame操作詳解
- CKEditor 4.4.1 添加代碼高亮顯示插件功能教程【使用官方推薦Code Snippet插件】
- ckeditor的使用和配置方法分享
- PHP CKEditor 上傳圖片實(shí)現(xiàn)代碼
- 通過(guò)Fckeditor把圖片上傳到獨(dú)立圖片服務(wù)器的方法
- 限制ckeditor上傳圖片文件大小的方法
- CKeditor4 字體顏色功能配置方法教程
