自定义CKEditor工具栏--JavaScript/Ajax--编程设计网

=波波日志 > JavaScript/Ajax > 自定义CKEditor工具栏=

[转]自定义CKEditor工具栏

工具栏的定义

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

-JavaScript

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

-JavaScript

    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']  
       ];  
   };  

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

-JavaScript

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

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

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

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

-JavaScript

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

来源：http://eahta.com/2010/10/how-to-custom-ckeditor-toolbar/

类别：JavaScript/Ajax　作者：转载　日期：2011-05-04　【评论：0】　

上一篇：CKeditor的配置及上传设置　
下一篇：JS/Exploit-DialogArg.gen特洛伊木马程序

暂时没有评论！

发表留言

热门博文