CKEditor

CKEditor即大名鼎鼎的FCKeditor，它終於在最近發布新版本了，與增加版本號不同，這次完全把它改名了，更名為CKeditor。這應該是和它的開發公司CKSource(波蘭華沙的公司)的名字有關吧，該公司的另一個產品為CKFinder（一個Ajax檔案管理器），這次可能為了保持一致，將FCK更改為CK，但是版本號繼承了下來，為CKeditor3.0版。

基本介紹

  • 軟體名稱：CKEditor
  • 開發商：CKSource
  • 軟體平台：PC
  • 軟體版本：3.0
  • 軟體語言：英文
安裝,集成,完整例子,

安裝

安裝CKEditor是一件容易的工作，只需要按照下面的簡單步驟就可以完成。
1.從CKEditor官方網站上下載CKEditor的最新版本。
2.將下載的檔案解壓到你網站目錄下的“ckeditor”資料夾里。
注意：你也可以將這些檔案放在你網站的任何一個地方，默認為“ckeditor”。測試你的安裝 編輯器附帶有一些用來驗證安裝結果是否能正常運行的簡單的例子網頁，請查看“_samples”目錄。訪問如下的地址進行測試：
http://<你的網站域名>/<CKEditor 安裝路徑>/_samples/index.html
例如：http://www.您的網站.com/ckeditor/_samples/index.html

集成

有若干個方式能將CKEditor集成到你的網頁中，在這裡介紹最常用的實現方法。
第一步：載入CKEditor
CKEditor 是一個JavaScript 應用程式，你只需要在你的網頁中包含一個檔案引用就能載入它。
如果你已經將CKEditor安裝在了你網站的“ckeditor”目錄，你可參照如下示例：
<head>
...
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>
用以上方式載入，CKEditor JavaScript API 就準備就緒，可以使用了。
第二步：創建一個編輯器實例
CKEditor就像一個在你網頁中的文本區域（textarea）一樣工作，它提供了一個簡單易寫的用戶界面、版式和豐富的文字輸入區域。但用文本區域要實現同樣的效果，並不容易，它需要用戶輸入html代碼。
但是，實際上，CKEditor仍然是使用一個文本區域來傳遞它的數據到伺服器上，這個文本區域對使用者來說是不可見的。所以，你必需創建並編輯一個實例,首先創建一個實例：
<textarea id="editor1"></textarea>
注意，如果你想要載入一些數據到編輯器中，例如從資料庫中讀出數據，只需要把數據放在文本區域（textarea）內就可以了，就像上面的例子一樣。在這個例子中，我們已經將文本區域（textarea）命名這“editor1”。當接收POST提交的數據時，這個名字將被用在伺服器操作。現在，開始使用CKEditor Javascript API,我們用一個編輯器實例來“替換（replace）”這個普通的文本區域（textarea），為此，必須加入如下一段JavaScript代碼：
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
上面的腳本塊只能包含在網頁的<textarea>標籤之後。也可以在<head>標籤內運行這個替換過程，但是在這種情況下，你必須確定DOM已經載入完畢，通常可以寫在window.onload事件裡面（這時DOM肯定已經載入完畢啦）：
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'editor1' );
};
</script>
第三步：保存編輯器內容數據
按照先前的描述，編輯器正如一個文本區域（textarea）一樣工作，所以，當提交一個包含一個編輯器實例的表單時，他的數據也將是很簡單的傳遞，用文本區域（textarea）的名稱作為健名來接收數據。舉個例子，按照上面的例子，在PHP中我們需要像這樣來處理數據：
<?php
$editor_data = $_POST[ 'editor1' ];
?>
客戶端數據處理 一些用應中（如ajax套用）需要在客戶端處理完所有的數據，然後用它自己的方式向伺服器傳送數據，在這些情況下，使用CKEditor API就足以輕鬆獲取編輯器實例中的內容。例 如：
<script type="text/javascript">
var editor_data = CKEDITOR.instances.editor1.getData();
</script>

完整例子

<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>

相關詞條

熱門詞條

聯絡我們