FCKEditor 是我早期一直用到現在的編輯器，該官網出了新產品 CKEditor 頗久，但一直沒時間摸，最近打算開始使用新玩具，寫下一些筆記來使用。
CKEditor 官方網站
CKEditor api 網站
CKEditor 基本框架
我在 config 裡面定義了自己的 toolbar 叫 chan
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="ckeditor/config.js" type="text/javascript"></script>
</head>
<body>
<textarea id="editor" name="editor" rows="10" cols="30"></textarea>
<script type="text/javascript">
CKEDITOR.replace('editor');
</script>
</body>
</html>
jQuery 導入
ckeditor 有整合 jQuery 的插件，可以利用 jQuery 導入。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.6.2.min" type="text/javascript"></script>
<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="ckeditor/adapters/jquery.js" type="text/javascript"></script>
<script src="ckeditor/config.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#editor').ckeditor();
});
</script>
</head>
<body>
<textarea id="editor" name="editor" rows="10" cols="30"></textarea>
</body>
</html>
config 基本定義
CKEditor 不像 FCKEditor 是修改他預設的 js 檔案，而是自己定義一個檔案並且透過 api 決定你要使用的內容，我定義了我認為比較用的到跟客戶比較不會出錯的按鈕，並且將 enter 的預設模式改為 br，還有加上開啟圖片上傳的功能。
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'chan';
config.toolbar_chan =
[
{name:'document', items:['Source','-','Preview','Print']},
{name:'clipboard', items:['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo']},
{name:'editing', items:['Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt']},
{name:'basicstyles', items:['Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat']},
'/',
{name:'paragraph', items:['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','- ','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl']},
{name:'links', items:['Link','Unlink','Anchor']},
{name:'insert', items:['Image','Table','HorizontalRule','SpecialChar','PageBreak']},
'/',
{name:'styles', items:['Format','Font','FontSize']},
{name:'colors', items:['TextColor','BGColor']},
{name:'tools', items:['Maximize']}
];
config.enterMode = CKEDITOR.ENTER_BR;
config.filebrowserImageUploadUrl = 'upload.php';
// 如果你要更換外觀，只要設定 skin 即可
// 官方有 v2、office2003 以及 kama 三種預設的 skin
config.skin = 'v2';
};
toolbar 名稱翻譯，來自阿忠伺服器
Source：原始碼
Save：儲存
NewPage：開新檔案
Preview：預覽
Templates：樣版
Cut：剪下
Copy：複製
Paste：貼上
PasteText：貼為文字格式
PasteFromWord：自 word 貼上
Print：列印
SpellChecker：拼字檢查
Scayt：即時拼寫檢查
Undo：復原(上一步)
Redo：重複(下一步)
Find：尋找
Replace：取代
SelectAll：全選
RemoveFormat：清除格式
Form：表單
Checkbox：核取方塊
Radio：選項按鈕
TextField：文字方塊
Textarea：文字區域
Select：選單
Button：按鈕
ImageButton：影像按鈕
HiddenField：隱藏欄位
Bold：粗體
Italic：斜體
Underline：底線
Strike：刪除線
Subscript：下標
Superscript：上標
NumberedList：編號清單
BulletedList：項目清單
Outdent：減少縮排
Indent：增加縮排
Blockquote：引用文字
JustifyLeft：靠左對齊
JustifyCenter：置中
JustifyRight：靠右對齊
JustifyBlock：左右對齊
Link：插入/編輯超連結
Unlink：移除超連結
Anchor：插入/編輯錨點
Image：插入影像
Flash：插入Flash
Table：插入表格
HorizontalRule：插入水平線
Smiley：插入表情
SpecialChar：插入特殊符號
PageBreak：插入分頁符號
Styles：樣式
Format：格式
Font：字體
FontSize：大小
TextColor：文字顏色
BGColor：背景顏色
Maximize：最大化
ShowBlocks：顯示區塊
About：關於 CKEditor
圖片上傳
CKEditor 的圖片上傳需要自己定義跟撰寫，個人覺得這樣比較好，提供比較大的彈性，下方是 CKEditor 上傳用 PHP 的基本架構。
// Required: anonymous function reference number as explained above.
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: instance name (might be used to load a specific configuration file or anything else).
$CKEditor = $_GET['CKEditor'] ;
// Optional: might be used to provide localized messages.
$langCode = $_GET['langCode'] ;
// Check the $_FILES array and save the file. Assign the correct path to a variable ($url).
$url = '/path/to/uploaded/file.ext';
// Usually you will only assign something here if the file could not be uploaded.
$message = '';
echo "";
我使用了 class.upload.php 當作我的上傳套件，下方是我修改的結果。
// Required: anonymous function reference number as explained above.
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: instance name (might be used to load a specific configuration file or anything else).
$CKEditor = $_GET['CKEditor'] ;
// Optional: might be used to provide localized messages.
$langCode = $_GET['langCode'] ;
// Usually you will only assign something here if the file could not be uploaded.
$message = '';
$url = '';
$newName = date('YmdHis'); // 新檔案名稱
$dir = 'uploads/editor/'; // 預設目錄
$width = 600; // 定義寬度
include_once 'libs/class.upload.php'; // 使用 upload class
$foo = new Upload($_FILES['upload']);
if ($foo->uploaded) {
$foo->file_new_name_body = $newName;
$foo->image_resize = true;
$foo->convert = 'jpg'; // 轉換為 jpg
$foo->jpeg_quality = 100;
$foo->image_x = $width;
$foo->image_ratio_y = true;
$foo->process($dir);
if ($foo->processed) {
$url = $dir.$newName.'.jpg';
} else {
$message = $foo->error;
}
}
echo "";
