自動目錄

• 區塊樣式
• 段落格式
• 設定編輯器載入的CSS
• 參考資料

CKeditor4 中可以改變區塊樣式、段落格式、字型名稱及字型大小，以下是我的設定，把常會用的挑出來..

修改 path/to/ckeditor/config.js

區塊樣式

ckeditor4可以定義class和style，所以在設定上相當的彈性，因為我用bootstrap的css，所以把他的label和alert都定義下去；同時，自定了一些會用的到樣式，這些樣式都可以自己定義，最後ckeditor4 會把他自動分類為「區塊樣式」「內嵌樣式」兩種，這就由不得你。

config.stylesSet = [
 { name: 'h3_blue', element: 'h3', styles: { 'color': '#376D9B' } },
 { name: 'h4_green', element: 'h4', styles: { 'color': '#379D9D' } },
 { name: '黑反白div' , element: 'div', attributes: { 'class': 'div_upsidedownblack' } },
 { name: 'code黑反白' , element: 'code', attributes: { 'class': 'code_upsidedownblack' } },
 { name: 'alert-warning', element: 'div', attributes: { 'class': 'alert alert-warning' } },
 { name: 'alert-success', element: 'div', attributes: { 'class': 'alert alert-success' } },
 { name: 'alert-info', element: 'div', attributes: { 'class': 'alert alert-info' } },
 { name: 'alert-danger', element: 'div', attributes: { 'class': 'alert alert-danger' } },
 { name: '按鍵', element: 'kbd', attributes: { 'class': 'likeabutton' } },
 { name: 'label-default', element: 'span', attributes: { 'class': 'label label-default' } },
 { name: 'label-primary', element: 'span', attributes: { 'class': 'label label-primary' } },
 { name: 'label-success', element: 'span', attributes: { 'class': 'label label-success' } },
 { name: 'label-info', element: 'span', attributes: { 'class': 'label label-info' } },
 { name: 'label-warning', element: 'span', attributes: { 'class': 'label label-warning' } },
 { name: 'label-danger', element: 'span', attributes: { 'class': 'label label-danger' } },
//    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow', 'padding':'3px' } },
];

段落格式

我把常用的挑出來，h6,h7理論上是可以不要了，除非你有做什麼特殊的樣式，這裡的標籤不能亂定義，一定要屬於區塊類型(Block-level Elements)^[1] 的才可以

config.format_tags = 'p;h1;h2;h3;pre;div;h4;h5'

字型名稱和字型大小

字型名稱不能亂設定，只能設定大家一定都有的字型

字型大小我採用相對而不用絕對，這是為了適應調適化網頁的關係

config.fontSize_sizes = 'x0.8/0.8em;x0.9/0.9em;x1/1em;x1.2/1.2em;x1.4/1.4em;x1.6/1.6em;x1.8/1.8em;x2/2em;x2.58/2.5em;x3/3em;x4/4em;';
config.font_names = 'Arial;Arial Black;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;新細明體;細明體;標楷體;微軟正黑體
';

設定編輯器載入的CSS

最後也是最重要的，上面做了這麼多樣式的設定，一定要記得把他們給載入到ckeditor4中，否則你無法在編輯器中直接看到你設定的樣式，得等存檔後才能看，很不方便。

config.contentsCss = ['/web/css/bootstrap.css','/web/css/jinzan.css'];

參考資料

[1] http://www.w3schools.com/html/html_blocks.asp