如何自定义CKEditor工具栏

CKEditor 工具栏是一个JavaScript数组，数组里面包含了要显示的工具的名字。工具栏的命名规则为：“toolbar_<name>”， “<name>”是定义的工具栏名字。 下面代码中是CKEditor默认定义好的两个工具栏，“Full”和“Basic”，并且默认使用的是“Full”工具栏

 

-------------------------------------------------------------------------------------------------------------------------

 

Js代码

1. config.toolbar = 'Full';
3. config.toolbar_Full =
4. [
5. ['Source','-','Save','NewPage','Preview','-','Templates'],
6. ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
7. ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
8. ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
9. ['BidiLtr', 'BidiRtl'],
10. '/',
11. ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
12. ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
13. ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
14. ['Link','Unlink','Anchor'],
15. ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
16. '/',
17. ['Styles','Format','Font','FontSize'],
18. ['TextColor','BGColor'],
19. ['Maximize', 'ShowBlocks','-','About']
20. ];
22. config.toolbar_Basic =
23. [
24. ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
25. ];

config.toolbar = 'Full';     config.toolbar_Full =   [       ['Source','-','Save','NewPage','Preview','-','Templates'],       ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],       ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],       ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],       ['BidiLtr', 'BidiRtl'],       '/',       ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],       ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],       ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],       ['Link','Unlink','Anchor'],       ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],       '/',       ['Styles','Format','Font','FontSize'],       ['TextColor','BGColor'],       ['Maximize', 'ShowBlocks','-','About']   ];     config.toolbar_Basic =   [       ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']   ];  

 

自定义工具栏

用户可以在config.js里自定义工具栏：

 

Js代码

1. CKEDITOR.editorConfig = function( config )
2. {
4. config.toolbar = 'MyToolbar';//把默认工具栏改为‘MyToolbar’
6. config.toolbar_MyToolbar =
7. [
8. ['NewPage','Preview'],
9. ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
10. ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
11. ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
12. '/',
13. ['Styles','Format'],
14. ['Bold','Italic','Strike'],
15. ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
16. ['Link','Unlink','Anchor'],
17. ['Maximize','-','About']
18. ];
19. };

CKEDITOR.editorConfig = function( config )   {         config.toolbar = 'MyToolbar';//把默认工具栏改为‘MyToolbar’         config.toolbar_MyToolbar =       [           ['NewPage','Preview'],           ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],           ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],           ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],           '/',           ['Styles','Format'],           ['Bold','Italic','Strike'],           ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],           ['Link','Unlink','Anchor'],           ['Maximize','-','About']       ];   };  

 

 

 

或者你也可以定义多个Toolbar，然后在不同的地方使用不同的toolbar属性的设置：

 

 

Js代码

1. CKEDITOR.replace( 'editor1',
2. {
3. toolbar : 'MyToolbar'
4. });
6. CKEDITOR.replace( 'editor2',
7. {
8. toolbar : 'Basic'
9. });

CKEDITOR.replace( 'editor1', { toolbar : 'MyToolbar' }); CKEDITOR.replace( 'editor2', { toolbar : 'Basic' }); 

 

当然，你也可以在调用CKEditor的地方直接定义新的工具栏

 

Js代码

1. CKEDITOR.replace( 'editor1',
2. {
3. toolbar :
4. [
5. ['Styles', 'Format'],
6. ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
7. ]
8. });