Show ckeditor toolbar in inline icons and buttons

ckeditor, css, javascript

Solution

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

Problem

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)

Original source