javascript - Show ckeditor toolbar in inline icons and buttons - Stack Overflow

admin管理员组

文章数量:1326078

in default ckeditor toolbar i see two line Icon/button like this :

Now, i need to design ckeditor toolbar in one line Like This:

how do design ckeditor for this?(normal/responsive view)

in default ckeditor toolbar i see two line Icon/button like this :

Now, i need to design ckeditor toolbar in one line Like This:

how do design ckeditor for this?(normal/responsive view)

• javascript
• css
• ckeditor

Share Improve this question Follow asked Dec 29, 2013 at 12:55 Pink CodePink Code 1,84477 gold badges4343 silver badges6666 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

In config.js you need edit this line :

config.toolbarGroups To config.toolbar And Remove {} / groups.

Like This:

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

Change to(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']
            ];

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

Just remove slash '/', after { name: 'others' },

本文标签： javascriptShow ckeditor toolbar in inline icons and buttonsStack Overflow