自定义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/

加支付宝好友偷能量挖...


评论(0)网络
阅读(136)喜欢(0)JavaScript/Ajax开发技巧