CKEditor 的樣版修改

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裡面，如下：