在内联图标和按钮中显示ckeditor工具栏

时间:2013-12-29 12:55:45

标签: javascript css css3 ckeditor

在默认ckeditor工具栏中,我看到twoIcon/button,如下所示:

enter image description here

现在,我需要在ckeditor行中设计one工具栏像这样:

enter image description here

如何为此设计ckeditor?(正常/响应视图)

2 个答案:

答案 0 :(得分:4)

在config.js中,您需要编辑此行:

config.toolbarGroups To config.toolbar并移除{} / groups

喜欢这个:

// The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

更改为(NOTE: This is my Icons please edit this):

config.toolbar =[
            ['Font','FontSize', 'Bold','Italic','Underline','Strike','-', 'Blockquote', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
            ['BidiLtr','BidiRtl'],
            ['TextColor','BGColor'],
            ['customimage','customsmiley','Link',],
            ['Flash','customfiles','Table','-','Outdent','Indent'],
            ['NumberedList','BulletedList', 'HorizontalRule'],
            ['Styles','Format'],['-'], ['Paste','PasteText','PasteFromWord'],
            ['-','Source'],
            ['Maximize']
            ];

答案 1 :(得分:4)

Your Config 

 config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

在{name:'其他人'之后删除斜杠' /' },