快捷導(dǎo)航

CKEditor網(wǎng)頁編輯器中文使用說明

更新時間：2010年04月21日 21:19:49 作者：

安裝CKEditor是一件容易的工作，只需要按照下面的簡單步驟就可以完成。多測試。

安裝
安裝CKEditor是一件容易的工作，只需要按照下面的簡單步驟就可以完成。
1.從我們的網(wǎng)站http://www.dbjr.com.cn/codes/21295.html上下載CKEditor的最新版本。
2.將下載的文件解壓到你網(wǎng)站目錄下的“ckeditor”文件夾里。
注意：你也可以將這些文件放在你網(wǎng)站的任何一個地方，默認(rèn)為“ckeditor”。
測試你的安裝
編輯器附帶有一些用來驗證安裝結(jié)果是否能正常運行的簡單的例子網(wǎng)頁，請查看“_samples”目錄。訪問如下的地址進行測試：
http://<你的網(wǎng)站域名>/<CKEditor 安裝路徑>/_samples/index.html
例如：
http://www.example.com/ckeditor/_samples/index.html
集成
有苦干個方式能將CKEditor集成到你的網(wǎng)頁中，在這里介紹最常用的實現(xiàn)方法。
第一步：載入CKEditor
CKEditor 是一個JavaScript 應(yīng)用程序，你只需要在你的網(wǎng)頁中包含一個文件引用就能加載它。如果你已經(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)建一個編輯器實例
CKEditor就像一個在你網(wǎng)頁中的文本區(qū)域（textarea）一樣工作，它提供了一個簡單易寫的用戶界面、版式和豐富的文字輸入?yún)^(qū)域，但用文本區(qū)域要實現(xiàn)同樣的效果，并不容易，它需要用戶輸入html代碼。
但是，實際上，CKEditor仍然是使用一個文本區(qū)域來傳遞它的數(shù)據(jù)到服務(wù)器上，這個文本區(qū)域?qū)κ褂谜邅碚f是不可見的，所以，你必需創(chuàng)建并編輯一個實例,首先創(chuàng)建一個實例：
<textarea name="editor1"><p>Initial value.</p></textarea>
注意，如果你想要加載一些數(shù)據(jù)到編輯器中，例如從數(shù)據(jù)庫中讀出數(shù)據(jù)，只需要把數(shù)據(jù)放在文本區(qū)域（textarea）內(nèi)就可以了，就像上面的例子一樣。在這個例子中，我們已經(jīng)將文本區(qū)域（textarea）命名這“editor1”.當(dāng)接收POST提交的數(shù)據(jù)時，這個名字將被用在服務(wù)器操作?，F(xiàn)在，開始使用CKEditor Javascript API,我們用一個編輯器實例來“替換（replace）”這個普通的文本區(qū)域（textarea），為此一段JavaScript命令是必須的：

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

 
<script type="text/javascript"> 
CKEDITOR.replace( 'editor1' ); 
</script> 

上面的腳本塊只能包含在網(wǎng)頁的<textarea>標(biāo)簽之后。也可以在<head>標(biāo)簽內(nèi)運行這個替換過程，但是在這種情況下你需要對“window.onload”事件進行監(jiān)聽：

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

 
<script type="text/javascript"> 
window.onload = function() 
{ 
CKEDITOR.replace( 'editor1' ); 
}; 
</script> 

第三步：保存編輯器內(nèi)容數(shù)據(jù)
按照先前的描述，編輯器正如一個文本區(qū)域（textarea）一樣工作，所以，當(dāng)提交一個包含一個編輯器實例的表單時，他的數(shù)據(jù)也將是很簡單的傳遞，用文本區(qū)域（textarea）的名稱作為健名來接收數(shù)據(jù)。舉個例子，按照上面的例子，在PHP中我們需要像這樣來處理數(shù)據(jù)：

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

 
<?php 
$editor_data = $_POST[ 'editor1' ]; 
?> 

客戶端數(shù)據(jù)處理
一些用應(yīng)中（如ajax應(yīng)用）需要在客戶端處理完所有的數(shù)據(jù)，然后用它自己的方式向服務(wù)器發(fā)送數(shù)據(jù)，在這些情況下，使用CKEditor API就足以輕松獲取編輯器實例中的內(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;p&gt;Initial value.&lt;/p&gt;</textarea> 
<script type="text/javascript"> 
CKEDITOR.replace( 'editor1' ); 
</script> 
</p> 
<p> 
<input type="submit" /> 
</p> 
</form> 
</body> 
</html> 