CKEditor内联重新排列自动生成的工具栏

Question

I have an inline content editor by using the contenteditable attribute. What I want is to rearrange the default auto-generated toolbar. The usual method is to create something like:

config.toolbar = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Templates' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
'/',
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
];

in the config.js.

The problem is that I don't know where to find the already auto-generated toolbar so as to change it the way I want. So I don't know what are the names used in the toolbar and therefore I can't make it how I want.

(the code used above is not the one I want obviously..)

Thanks in advance!

Answer 1

Have you seen the Setting Configuration guide ? You can either set toolbar in the config.js file which will be loaded while initializing editor or directly in CKEDITOR.inline , but to use this method you need to disable automatic editors creation:

// We need to turn off the automatic editor creation first.
CKEDITOR.disableAutoInline = true;

var editor = CKEDITOR.inline( 'editable', {
    toolbar: [ ... ]
} );

If you don't know button names, then check out this question: What toolbar buttons are available in CKEditor 4?

Note: instead of rearranging entire toolbar, you can just rearrange groups of buttons – read more in the Toolbar Customization guide .