如何自定义CKEditor工具栏

如何自定义CKEditor工具栏

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

 

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

 

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里自定义工具栏：

 

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属性的设置：

 

 

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

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

  

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

 

CKEDITOR.replace( 'editor1',   
    {   
        toolbar :   
        [   
            ['Styles', 'Format'],   
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']   
        ]   
    });