2011/11/24

CKEditor

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

沒有留言: