ckeditor 開發者文檔配置設置

editor具有豐富的配置來定製它的用戶界面，特性和功能，主要的配置文件名爲“config.js”。它在CKEditor安裝文件夾的根目錄上。

ckeditor 官方網址：http://ckeditor.com.cn

 ckeditor API 地址：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html

可用的配置選項

所有可用的配置選項可以再我們的api文檔中找到, 在 CKEDITOR.config

 

在頁面中配置

設置配置的最好方式是在你的頁面中，在創建editor示例的時候。這樣你就不用修改安裝文件夾的原始分發文件了, 並且更易使用。

頁面配置這種方式，可以在任何editor實例化函數中使用，也就是 CKEDITOR.replace 和 CKEDITOR.appendTo. 例如

 

 

view plain

CKEDITOR.replace( 'editor1',      {          toolbar : 'Basic',          uiColor : '#9AB8F3'      });  

 

 

注意配置屬性石通過字面對象定義， (以 "{"開頭和以 "}"結尾)的鍵值對，因此，正確的語法是 (configuration name) + ":" +(configuration value). 請不要使用“=” 。

使用config.js 文件來配置

你也可以吧你的配置放在config.js文件中，你會注意到那個文件默認幾乎是空的。你只需簡單的把想要改變的配置加入到文件中。例如

1	CKEDITOR.editorConfig = function ( config )

2

{

3	config.language = 'fr' ;

4	config.uiColor = '#AADC6E' ;

5

};

上面的 CKEDITOR.editorConfig函數定義必需總是存在這樣設置才能起作用。這個配置文件會在你的頁面範圍內執行，所以你也可以把配置保存在一個定義在頁面中的變量，或者在另外一個JavaScript文件。

使用用戶配置文件

這是另外一個被推薦的方式來設置你的配置，作爲使用默認的config.js文件的替代，你可以複製一份那個文件到你網站的任何地方，並指引你的 editor實例化去裝載它，這樣的優點是你可以避免改變原始的文件，讓以後更新CKEditor更加容易，只需要簡單的覆蓋所有的文件。

假設你複製了config.js到一個在你網站根目錄的命爲”custom“文件夾內，並把文件重命名爲"ckeditor_config.js"，這樣的話，你只需要設置 customConfig 當你創建editor實例的時候. 例如：

 

1	CKEDITOR.replace( 'editor1' ,

2

{

3	customConfig : '/custom/ckeditor_config.js'

4

});

你的自定義的配置文件必須與默認的config.js的格式一致。

配置重新裝載順序

沒有隻能使用一個配置選項的限制，你可以混合的使用它們，並且配置能夠正確地重新裝載。下面是創建editor實例時配置加載的順序。

創建editor實例，這時所有的默認配置將會設置。如果用戶customConfig被設置爲 "in-page",則這個文件會被加載，否則的話默認的config.js將會被加載。所有config.js中的設置將會覆蓋當前實例的設置。如果第二步中的設置同樣定義了 一個新的customConfig值，則新的文件將會加載並且它的設置將會覆蓋當前實例的設置。這將會重複的發生直到沒有customConfig被定 義。最後，定義爲"in-page"的設置將會覆蓋當前實例的設置。（除了在第一點中提到的customConfig，）

避免加載外部的配置文件

完全可以避免加載I外部的配置文件,減少要加載的文件的數量。只需要設置 customConfig 爲空字符串就可以了，例如

view sourceprint ?

1	CKEDITOR.replace( 'editor1' ,

2

{

3	customConfig : ''

4

});

如果你沒有在config.js或用戶配置文件中設置配置的話，這種方式是極力推薦的。

 

------------------------------------------ Party2： custormized tool bar ------------------------------------------------

 

當使用editor的全功能版本，很多時候並不是所有的選項都是必須的。所有，定製工具條就是一個最普通和必須的任務。

工具條的定製

工具條的是定義在一個JavaScript數 組中的，它包含了editor中可用的，顯示在"toolbar rows"的元素。有兩種方式爲editor設置你想要的工具。他可以直接地設置在“toolbar”選項中。或者設置在名 爲"toolbar_<name>"的配置中，其中的"<name>是可以標識 "toolbar "的設置，下面在editor的默認設置。

view source

01	config.toolbar = 'Full' ;

02

03	config.toolbar_Full =

04

[

05	[ 'Source' , '-' , 'Save' , 'NewPage' , 'Preview' , '-' , 'Templates' ],

06	[ 'Cut' , 'Copy' , 'Paste' , 'PasteText' , 'PasteFromWord' , '-' , 'Print' , 'SpellChecker' ,'Scayt' ],

07	[ 'Undo' , 'Redo' , '-' , 'Find' , 'Replace' , '-' , 'SelectAll' , 'RemoveFormat' ],

08	[ 'Form' , 'Checkbox' , 'Radio' , 'TextField' , 'Textarea' , 'Select' , 'Button' ,'ImageButton' , 'HiddenField' ],

09

'/' ,

10	[ 'Bold' , 'Italic' , 'Underline' , 'Strike' , '-' , 'Subscript' , 'Superscript' ],

11	[ 'NumberedList' , 'BulletedList' , '-' , 'Outdent' , 'Indent' , 'Blockquote' ],

12	[ 'JustifyLeft' , 'JustifyCenter' , 'JustifyRight' , 'JustifyBlock' ],

13	[ 'Link' , 'Unlink' , 'Anchor' ],

14	[ 'Image' , 'Flash' , 'Table' , 'HorizontalRule' , 'Smiley' , 'SpecialChar' , 'PageBreak' ],

15

'/' ,

16	[ 'Styles' , 'Format' , 'Font' , 'FontSize' ],

17	[ 'TextColor' , 'BGColor' ],

18	[ 'Maximize' , 'ShowBlocks' , '-' , 'About' ]

19

];

20

21	config.toolbar_Basic =

22

[

23	[ 'Bold' , 'Italic' , '-' , 'NumberedList' , 'BulletedList' , '-' , 'Link' , 'Unlink' , '-' ,'About' ]

24

];

注意到上面有兩個toolbar的定義，一個名爲“Full"，另外一個爲”Base".其中“Full"定義被用作toolbar設置。

Toolbar Bands

每個toolbar定義 由一連串"toolbar bands"組成，它決定了最後的工具欄佈局。當editor的尺寸改變時，集合中的條目會一起移動到新行中。

就像你看到上面的定義，每個toolbar集合都分開定義在JavaScript的字符串數組中。每個字符串表示一個toolbar條目。toolbar條目是由插件定義的。

你也可以使用破折號("-")來作爲toolbar集合的分隔符。

強制換行

查看“Full”工具條的定義你會注意到有一些("/"),斜線字符在toolbar bands中，這個斜線是用來給它所在的地方強制換行的，這樣這個toolbar bands就會在新的一行中出現而不是跟住之前的toolbar bloos

自定義工具條

A simple way to configure all editors toolbar is by simply adding a custom toolbar definition inside the config.js file, or even better in a separated configuration file (see "Setting Configurations "). The easiest way for that is by simply copying the above "Full" toolbar definition, and strip it down to your needs. For example, the following is a good recommended toolbar definition to have in the config.js file:

配置所有editor的一個簡單的方法是 把自定義toolbar放入config.js文件中。更好的方法是放入分開的文件中。請查看 "Setting Configurations“ 。最簡單的方式則是把”Full“ 這個toolbar的定義複製下來，安裝需要去除不用的按鈕。例如，下面就是在config.js文件中的一個極好的推薦配置。

view source

01	CKEDITOR.editorConfig = function ( config )

02

{

03	config.toolbar = 'MyToolbar' ;

04

05	config.toolbar_MyToolbar =

06

[

07	[ 'NewPage' , 'Preview' ],

08	[ 'Cut' , 'Copy' , 'Paste' , 'PasteText' , 'PasteFromWord' , '-' , 'Scayt' ],

09	[ 'Undo' , 'Redo' , '-' , 'Find' , 'Replace' , '-' , 'SelectAll' , 'RemoveFormat' ],

10	[ 'Image' , 'Flash' , 'Table' , 'HorizontalRule' , 'Smiley' , 'SpecialChar' , 'PageBreak' ],

11

'/' ,

12	[ 'Styles' , 'Format' ],

13	[ 'Bold' , 'Italic' , 'Strike' ],

14	[ 'NumberedList' , 'BulletedList' , '-' , 'Outdent' , 'Indent' , 'Blockquote' ],

15	[ 'Link' , 'Unlink' , 'Anchor' ],

16	[ 'Maximize' , '-' , 'About' ]

17

];

18

};

 

你可以在配置文件中創建任意多的toolbar定義，以後，基於某種標準，你可以決定toolbar使用在每個編輯器實例中，例如，使用下面的代碼，創建了兩個editor，分別使用了不同的toolbar。

view source

1	CKEDITOR.replace( 'editor1' ,

2

{

3	toolbar : 'MyToolbar'

4

});

5

6	CKEDITOR.replace( 'editor2' ,

7

{

8	toolbar : 'Basic'

9

});

 

當創建編輯器實例時，爲單獨的頁面設置toolbar也是可能的。那樣的話，只需要直接的設置toolbar就可以了

view source

1	CKEDITOR.replace( 'editor1' ,

2

{

3

toolbar :

4

[

5	[ 'Styles' , 'Format' ],

6	[ 'Bold' , 'Italic' , '-' , 'NumberedList' , 'BulletedList' , '-' , 'Link' , '-' ,'About' ]

7

]

8	}); 轉摘自：http://www.haogongju.net/art/986785