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裡面,如下:

posted on 2011-07-19 11:44  cn三少<script></script>  阅读(1173)  评论(0编辑  收藏  举报

导航