ckeditor中文文档——开发者文档（3）配置--配置设置

---- 摘自：http://blog.csdn.net/lhx1026/article/details/5161433

ckeditor中文文档——开发者文档（3）配置--配置设置

 

 

editor具有丰富的配置来定制它的用户界面，特性和功能，主要的配置文件名为“config.js”。它在CKEditor安装文件夹的根目录上。

 

可用的配置选项

所有可用的配置选项可以再我们的api文档中找到, 在 CKEDITOR.config

 

在页面中配置

设置配置的最好方式是在你的页面中，在创建editor示例的时候。这样你就不用修改安装文件夹的原始分发文件了, 并且更易使用。

页面配置这种方式，可以在任何editor实例化函数中使用，也就是 CKEDITOR.replace 和 CKEDITOR.appendTo. 例如

 

 

view plain

1. CKEDITOR.replace( 'editor1',  
2.     {  
3.         toolbar : 'Basic',  
4.         uiColor : '#9AB8F3'  
5.     });  

 

 

注意配置属性石通过字面对象定义， (以 "{"开头和以 "}"结尾)的键值对，因此，正确的语法是 (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实例时配置加载的顺序。

1. 创建editor实例，这时所有的默认配置将会设置。
2. 如果用户customConfig被设置为 "in-page",则这个文件会被加载，否则的话默认的config.js将会被加载。所有config.js中的设置将会覆盖当前实例的设置。
3. 如果第二步中的设置同样定义了一个新的customConfig值，则新的文件将会加载并且它的设置将会覆盖当前实例的设置。这将会重复的发生直到没有customConfig被定义。
4. 最后，定义为"in-page"的设置将会覆盖当前实例的设置。（除了在第一点中提到的customConfig，）

避免加载外部的配置文件

完全可以避免加载I外部的配置文件,减少要加载的文件的数量。只需要设置 customConfig 为空字符串就可以了，例如

view source

print  ?

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

});