您的位置：首页 > 其它

ckeditor中文文档——开发者文档（3）配置--工具栏

2010-01-08 21:41 1041 查看
原文地址：http://www.docwar.com/b/15001/5.htm

当使用editor的全功能版本，很多时候并不是所有的选项都是必须的。所有，定制工具条就是一个最普通和必须的任务。


工具条的定制

工具条的是定义在一个JavaScript数组中的，它包含了editor中可用的，显示在"toolbar
rows"的元素。有两种方式为editor设置你想要的工具。他可以直接地设置在“toolbar”选项中。或者设置在名
为"toolbar_<name>"的配置中，其中的"<name>是可以标识 "toolbar
"的设置，下面在editor的默认设置。

view source

print
?

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

print
?

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

print
?

1

CKEDITOR.replace(

'editor1'

,

2


{

3


toolbar :

'MyToolbar'

4


});

5

6

CKEDITOR.replace(

'editor2'

,

7


{

8


toolbar :

'Basic'

9


});

当创建编辑器实例时，为单独的页面设置toolbar也是可能的。那样的话，只需要直接的设置toolbar就可以了

view source

print
?

1

CKEDITOR.replace(

'editor1'

,

2


{

3


toolbar :

4


[

5


[

'Styles'

,

'Format'

],

6


[

'Bold'

,

'Italic'

,

'-'

,

'NumberedList'

,

'BulletedList'

,

'-'

,

'Link'

,

'-'

,

'About'

]

7


]

8


});


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航