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

Question

在默认ckeditor 工具栏中，我看到这样的two行Icon/button：

现在，我需要像这样设计ckeditor工具栏one：

如何为此设计 ckeditor？（正常/响应视图）

Answer 1

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