Where the list of all toolbar button names and group names available in CKEditor 4?

Question

This question is similar to What toolbar buttons are available in CKEditor 4? and a reinforce of this old other one. I add here some perceptions and personal difficulties that I faced.

The CKEditor documentation is good, but pulverized and "incomplete" for Javascript programmers (first-time CKEditor deployer), because "stops in the middle"... Examples:

• if I need removeButtons, I need also the list of valid names.

• if I need to customize — by source-code, changing array elements —, I need not only clues and examples as here, but a full list of valid names, syntax rules, context exceptions, and perhaps a list of "official plugin names".

QUESTION: there are a command (a simple alert(debug)) or a documented list of all possible names? (or all controled and registered plugin-names, group-names, etc.)

---

... CKEditor4 is promoted as (the best of the best!) "plug and play" editor, but, for programmers, it is false, without proper "managing controlled-names" support.

NOTE: all config.js need a reference to valid names, and no documentation show a list of all valid names for my changes at config.js arrays. This is all that a programmer need, but today (August 2013) we need to expend most of time using Google to find valid names, or using browser's "element inspector" to get clues about it. With no name, no programming task is simple at config array.

DREAM: for web designer the ckeditor.com/download supply a good "customize ckeditor" (!!). But for developers, there are no tool or illustration showing "button icons and associated names", or group names, etc... That is, an "organized map from features to names" (and vice-versa). For each map we need also, of course, the "context exceptions", like "Source" that not works with inline editor.

---

---

(More practical examples, edit after @Noseratio and @davidkonrad comments). The problem is "what the valid name for each context?"

If I have at my config something like,

editor.config.toolbarGroups = [
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
             ...
    { name: 'styles' },
    { name: 'colors' },
];

and I need to change { name: 'styles' } to a customized one, for example I need this functions:

  { name: 'styles', items : [ 'Styles', 'Format', 'FontSize' ] }

so, I need to know all that names, and when (contexts) to use properties "name", "items", "groups" with these names. I do a bug if I use "items" at toolbarGroups property, or if I use "Fontsize" instead "FontSize". Also, with addButtonCommand and others, I need to know any valid parameter. It is WRONG to to define,

  addButtonCommand( 'FontSize', lang.underline, 'underline',
                     config.coreStyles_underline );

but is difficult to work without knowing "all valid names list" for each context.

---

(More practical examples, edit after @MahanGM comment)

If I use this v4 guide and instructions (that is equivalent to this v3), I have "name problems", when using CKEditor4 and inline editor:

• The "default CKEditor toolbar setting" is the "full toolbar"?

• If I take off 'spellchecker' (old v3 name 'SpellChecker'), why not work? and why need take off also 'Scayt'?

• What names I can use with inline editor? When use groups and when use items in the editor.config.toolbar array?

• ... etc. ... (read my question: all the problem is the correct choice of valid name in a context)... Programmer need a "complete formal specification", not only clues and fragments of information.

Answer 1

(this is not an answer but a suggestion for it, you can copy/paste to post yours)

(you can also colabore editing here)

"Item by Item" Configuration

Your editor will work exactly as in your "toolbox definition": a simple JavaScript array,

config.toolbar = [ G1, G2, ..., GN ];

controlling "every single toolbar in the toolbox" by its contents and by defining their precise position. The toolbar definitions, G_i, can be arrays or strings:

• When G_i is a string, it is the bar-line separator, '/';
• When G_i is an array, it is a sequence (alias "group") of button names (alias "item").

So, the general form of the toolbox definition array is

config.toolbar = [
     ['ITEM11', 'ITEM12', ..., 'ITEM1N'], 'BAR_SEP',
     ['ITEM21', 'ITEM22', ..., 'ITEM2N'], ...
];

where ITEM_i,j is a valid button name. In ABNF it is,

 ITEM      =  BUTNAME / "-"
 BUTNAME   = 1*ALPHA      ; and usually a CamelCase name.

Scenarios (that define "namespaces") of configuration at August 2013, with CKEditor v4:

1. git clone git://github.com/ckeditor/ckeditor-releases.git

2. Other that have less plugins or less code.

3. Other that have more (oficially registered namespace) plugins.

Software context where the BUTNAMEs are valid:

• the associeated plugin (see below the table of "Full list of valid BUTNAMEs") is installed (see scenarios 1, 2 or 3);

• the BUTNAME is not at config.removeButtons list, neither the associated plugin removed at config.removePlugins;

• ... the BUTNAME is defined for that CKEditor version (ex. use 'spellchecker' for v4 and 'SpellChecker' for v3).

All registered plugin names

See config.plugins in the scenario-1, this is the list of all valid names for plugins (alphabetic order):

 a11yhelp,about,basicstyles,blockquote,button,clipboard,contextmenu,dialog,
 dialogui,elementspath,enterkey,entities,eqneditor,fakeobjects,filebrowser,
 find,floatingspace,floatpanel,horizontalrule,htmlwriter,image,indent,
 indentlist,link,list,magicline,maximize,menu,menubutton,panel,pastefromword,
 pastetext,popup,removeformat,resize,save,scayt,showblocks,sourcearea,
 specialchar,tab,table,tabletools,toolbar,undo,wsc,wysiwygarea
 ,... ? ... more?

They are also "plugin" or are "extraplugin"? See scenario-3:

 texttransform, etc.

PS: with scenario-1. at the plugins/ directory we have only,

a11yhelp   dialog           icons.png  magicline      specialchar  wsc
about      fakeobjects      image      pastefromword  table
clipboard  icons_hidpi.png  link       scayt          tabletools

Full list of valid BUTNAMEs

Specification of all names and related contexts. The plugins are sufixed by "-1" or "-3" to remember the scenario's "namespace".

BUTNAME                  | PLUGIN            |  Invalid context
-------------------------|-------------------|------------------
Bold                     | default-1         | ?Always ok? no excetions?
Italic                   | default-1         | ...
...                      | ...               | ...
Source                   | default-1         | not works with inline editor
...                      | ...               | ...
TransformTextToUppercase | texttransform-3   | scenario-1
TransformTextCapitalize  | texttransform-3   | scenario-1
...                      | ...               | ...

(this answer will be complete if we can complete this table!)

Answer 2

This one from Toolbar Configuration helped me a lot:

// Toolbar configuration generated automatically by the editor based on config.toolbarGroups.
config.toolbar = [
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', '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: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    '/',
    { 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', 'Language' ] },
    { 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: [ '-' ] },
    { name: 'about', items: [ 'About' ] }
];

and

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

when using in own init:

CKEDITOR.replace( 'topicMessageInput', {
        toolbar: [
                { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
                { na..

Hope it helps.