簡單的介紹一下 CKEditor
CKEditor是一個非常強大的HTML編輯器，舊稱FCKeditor，是一個專門使用在網頁上屬於開放原始碼的所見即所得文字編輯器套件，2003年就開始累積很多用戶了，至今已經十年的時間了，我想很多開發人員對CKEditor這名字應該不陌生，CKEditor 主要優點而且相容於絕大部分的網頁瀏覽器，該有的功能全都有，也提供非常多的配置及API可以符合各種不同的開發需求，而且最重要的是免費的^^，除此之外官網上也提供了非常多相關的使用範例，還有非常詳細的開發文件可讓開發者更了解使用方式，但此篇文章主要不是介紹CKEditor，而是介紹CKEditor的基本配置Config檔的設定。
CKEditor4的設定有些地方好像跟之前板本不太一樣，那本文介紹的CKEditor4的這個版本，所以測試環境請以CKEditor4為準，CKEditor4可至官網下載，也可由下方連結下載。
CKEditor 相關資源
CKEditor 官方網站
http://ckeditor.com/
CKEditor 下載
http://ckeditor.com/download
CKEditor DEMO
http://ckeditor.com/demo
CKEditor 開發文件
http://docs.ckeditor.com/
CKEditor 開發文件 > config
http://docs.ckeditor.com/#!/api/CKEDITOR.config
重要配置說明如下，主要分為工具列、基本設定、選單設定三大部份~
工具列配置：
config.toolbar_Basic =
[
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'FontSize', 'TextColor', 'BGColor' ],
'/',
['ShowBlock','Source']
];
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField' ] },
'/',
{ 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','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];基本設定：
//尺寸設定
config.width=680;
config.height=150;
//重做(上一步)次數
config.undoStackSize = 50;
//介面的語系 Defaults to: '' ; 留空字串的話會字動抓使用者本地端語言(繁中為zh-tw)
config.language = '';
//設定內容語系 Defaults to: 與編輯器語言一樣
config.contentsLanguage = '';
// UI 底色
config.uiColor = '#CCCCCC';
//設true CKEDITOR.editor.filter 失去作用 (註二)
config.allowedContent=true;
//allowedContent為false特別允許某些未開啟功能的標籤 (註二)
config.extraAllowedContent='iframe';
//工具列可折疊 Defaults to: false
config.toolbarCanCollapse = false;
// CKEditor的主題更換
config.skin = 'moono';
//文字區塊可否拖曳放大縮小 Defaults to: true
config.resize_enabled = false;
config.resize_minWidth = 500;
config.resize_maxWidth = 750;
config.resize_minHeight = 600;
config.resize_maxHeight = 600;
// 預設字體 - 詳見最下方(註一)
config.font_defaultLabel = 'Arial';
// 預設字體尺寸 - 詳見最下方(註一)
config.fontSize_defaultLabel = '12px';
// 載入時內容預設是所見即所得或是原始碼模式
// wysiwyg 所見即所得
// source 原始碼
// Defaults to: 'wysiwyg'
config.startupMode = 'wysiwyg';
//唯讀 Defaults to: false
config.readOnly = false;
//載入時要不要Focus Defaults to: false
config.startupFocus = false;
// 使用Shift+ Enter組合鍵的行為。
// CKEDITOR.ENTER_P = <p>;
// CKEDITOR.ENTER_BR = <br/>
// CKEDITOR.ENTER_DIV = <div>
// Defaults to: CKEDITOR.ENTER_BR
config.shiftEnterMode = CKEDITOR.ENTER_BR;
// 使用ENTER鍵產生的標籤
// 使用Shift+ Enter組合鍵的行為。
// CKEDITOR.ENTER_P = <p>;
// CKEDITOR.ENTER_BR = <br/>
// CKEDITOR.ENTER_DIV = <div>
// Defaults to: CKEDITOR.ENTER_BR
config.enterMode = CKEDITOR.ENTER_BR;關於WORD文字設定
// 貼上的文字是否要清除所有格式 Defaults to: false
config.forcePasteAsPlainText = false;
//從Word貼上時要不要提示「需清理內容為純文字」的對話框。 Defaults to: false
config.pasteFromWordPromptCleanup = false;
//是否忽略所有的字體相關的格式化風格，包括：字體大小、字型、字體顏色、字體背景色
//Defaults to: true
config.pasteFromWordRemoveFontStyles = false;
//是否刪除不能管理編輯器中的元素的樣式。請注意，這並不處理特定字體的風格，這取決於設置而不是pasteFromWordRemoveFontStyles。 Defaults to: true
config.pasteFromWordRemoveStyles = false;設定選單：
// 字體大小選單 (名稱/字體大小)
CKEDITOR.config.fontSize_sizes = '8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px';
// 字型選單 (名稱/字體)
CKEDITOR.config.font_names = 'Arial/Arial, Helvetica, sans-serif;' +
'Comic Sans MS/Comic Sans MS, cursive;' +
'Courier New/Courier New, Courier, monospace;' +
'Georgia/Georgia, serif;' +
'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' +
'Tahoma/Tahoma, Geneva, sans-serif;' +
'Times New Roman/Times New Roman, Times, serif;' +
'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +
'Verdana/Verdana, Geneva, sans-serif';
// 設定表情符號icon
config.smiley_descriptions = ['smiley', 'sad', 'wink', 'laugh', 'frown', 'cheeky', 'blush', 'surprise', 'indecision', 'angry', 'angel', 'cool', 'devil', 'crying', 'enlightened', 'no', 'yes', 'heart', 'broken heart', 'kiss', 'mail'];
// 設定表情符號對應圖片
config.smiley_images =['regular_smile.gif', 'sad_smile.gif', 'wink_smile.gif', 'teeth_smile.gif', 'confused_smile.gif', 'tongue_smile.gif', 'embarrassed_smile.gif', 'omg_smile.gif', 'whatchutalkingabout_smile.gif', 'angry_smile.gif', 'angel_smile.gif', 'shades_smile.gif', 'devil_smile.gif', 'cry_smile.gif', 'lightbulb.gif', 'thumbs_down.gif', 'thumbs_up.gif', 'heart.gif', 'broken_heart.gif', 'kiss.gif', 'envelope.gif']
// 表情符號路徑
config.smiley_path = CKEDITOR.basePath + 'plugins/smiley/images/';(註一)
解決方法詳見我的另一篇文章
CKEditor4 預設字體大小 fontSize_defaultLabel、預設字型 font_defaultLabel 無法運作的解決方案
http://vector888.blogspot.com/2013/08/ckeditor4-fontsizedefaultlabel.html
(註二)
config.allowedContent;
config.extraAllowedContent;
詳細介紹及用法，詳見我的另一篇文章
CKEditor4 自動清除內容標籤問題的解決方法
http://vector888.blogspot.com/2013/08/ckeditor4.html
