9. 所見即所得編輯器

一、超強的CKEditor（http://ckeditor.com）

1.下載解壓，執行 http://網址/ckeditor/_samples/就有完整安裝說明及範例。
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<textarea name='event' class="ckeditor"></textarea>

二、設定工具列

1.預設工具列僅有：Full及Basic兩種，要修改現有工具列，可開啟config.js來編輯。
CKEDITOR.editorConfig = function( config ){
    config.toolbar = 'Basic';
};
2.自訂工具列（'-'是分組；'/'是下一行）
CKEDITOR.editorConfig = function( config ){
    config.toolbar = 'TadToolbar';
    config.toolbar_TadToolbar =
    [
        ['Source','-','Templates','-','Cut','Copy','Paste','PasteText','PasteFromWord'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Link','Unlink','Anchor'],
        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
        '/',
        ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
        ['Format','FontSize','-','TextColor','BGColor']
    ];
};

三、換顏色、換佈景

CKEDITOR.editorConfig = function( config ){
    config.skin = 'v2'; //office2003 , kama
    config.language = 'zh';
    config.uiColor = '#AADC6E';
};

四、整合CKFinder（上傳、瀏覽工具）

1.解壓，和CKEditor同一層即可。
2.在config.js中的CKEDITOR.editorConfig裡加入以下設定：
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';
3.開啟上傳功能，開啟ckfinder/config.js
(1) 32行：設成true（這樣才能上傳）
(2) 55行：設定上傳位置（若不設，預設會是根目錄下的userfiles）
(3) 72行：設定上傳絕對路徑