CKEditor 目前提供了3個樣版,Kama、Office 2003以及V2等3種樣版，至於要如何套用這3種樣版請見下面程式：
1. CKEditor 套用Kama樣版
<textarea cols=’80′ id=’editor_kama’ name=’editor_kama’ rows=’10′>
丫 忠的伺服器-CKEditor套用Kama樣版
</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( ‘editor_kama’,{skin : ‘kama’});
//針對id,name為editor_kama的textarea，使用kama樣版
</script>
2. CKEditor 套用editor_office2003樣版
<textarea cols=’80′ id=’editor_office2003′ name=’editor_office2003′ rows=’10′>
丫 忠的伺服器-CKEditor套用office2003樣版
</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( ‘editor_office2003′,{skin : ‘office2003′});
//針對id,name為editor_office2003的textarea，使用office2003樣版
</script>
3. CKEditor 套用V2樣版
<textarea cols=’80′ id=’editor_v2′ name=’editor_v2′ rows=’10′>
丫 忠的伺服器-CKEditor套用v2樣版
</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( ‘editor_v2′,{skin : ‘v2′});
//針對id,name為editor_v2的textarea，使用v2樣版
</script>
CKEditor 的樣版底色修改
CKEditor提供了一個很簡便的方式就可以修改樣版的底色，可以依據網站的樣式自行修改CKEditor的底色來符合網站的風格，修改的方式是再簡單不過了，只需要給定幾個參數即可：
<textarea cols=’80′ id=’editor_ui_color’ name=’editor_ui_color’ rows=’10′>
丫 忠的伺服器-CKEditor套用樣版底色
</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( ‘editor_ui_color‘,{
extraPlugins : ‘uicolor’, //指定要替換底色>
uiColor: ‘#14B8C4′, //指定的底色
});
</script>
CKEditor 的語系修改
如果您要自行指定CKEditor的語系，只須要指定language即可，詳細的語系您可以參考/ckeditor/lang/_languages.js
<textarea cols=’80′ id=’editor_language’ name=’editor_language’ rows=’10′>
丫 忠的伺服器-CKEditor語系設定
</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( ‘editor_language’,{
language: ‘zh’, //指定為正體語系,如果要簡體語系則設定’zh-cn’
});
</script>
CKEditor 的toolbar修改
我想toolbar的修改應該是最常需要修改的地方，預設CKEditor有提供兩種已經制訂好的toolbar，Full及Basic兩種，如果您使用預設這兩種toolbar就可以符合需求的話，那就可以忽略本段；但是，如果您要修改符合自己需求的話，請繼續往下看。
修改toolbar-Full：
<textarea cols=’80′ id=’toolbar_full’ name=’toolbar_full’ rows=’10′>丫 忠的伺服器-CKEditor toolbar修改-Full</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( ‘toolbar_full’,{toolbar : ‘Full‘});
</script>
修改toolbar-Basic：
<textarea cols=’80′ id=’toolbar_basic’ name=’toolbar_basic’ rows=’10′>丫 忠的伺服器-CKEditor toolbar修改-Basic</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( ‘toolbar_basic’,{toolbar : ‘Basic‘});
</script>
修改toolbar-自訂：
<textarea cols=’80′ id=’toolbar_mytoolbar’ name=’toolbar_mytoolbar’ rows=’10′>丫 忠的伺服器-CKEditor toolbar修改-自訂</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( ‘toolbar_mytoolbar’,{
| toolbar : |
|
[ |
|
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ], |
|
[ 'UIColor' ] |
|
] |
});
</script>
上面的自訂toolbar方式，如果對於只需要在單一頁面呈現一次的使用者還算ok，但是，如果對於要將自訂CKEditor放在很多網頁的人來說，每次都要貼這個toolbar的設定，的確有一點麻煩。
好在CKEditor很貼心地提供了一種可以讓使用者自訂toolbar的群組，當設定群組後給定一個自訂的名稱，之後如果要使用相同的toolbar時，只要設定自訂的名稱就可以了，那要怎麼做呢？請見底下：
1.找到config.js這隻檔案，將你自訂的toolbar設定放在config.js裡面，如下：