All geek questions in one place

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

This question is similar to What toolbar buttons are available in CKEditor 4? and strengthen this old other . I add here some sensations and personal difficulties that I encountered.

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

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

  • if I need to configure - using the source code, changing the elements of the array - I need not only hints and examples like here , but a complete list of valid names, rule syntax, contextual exceptions, and possibly a list of "official plugin names".

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

... CKEditor4 is touted as the (best of the best!) Plug and play editor, but for programmers it is incorrect without proper support for "controlled name management".

NOTE: all config.js need a reference to valid names, and the documentation does not list all valid names for my changes in config.js arrays. This is all the programmer needs, but today (August 2013) we need to spend most of our time using Google to find the correct names or use the “element inspector” of the browser to find out. Without a name, no programming task is easy in the configuration array.

DREAM: for the web designer ckeditor.com/download put a good "configure ckeditor" (!!). But for developers, there is no tool or illustration depicting “button icons and associated names” or group names, etc. That is, an "organized map from functions to names" (and vice versa). For each map, we also need, of course, “contextual exceptions,” such as “Source,” which does not work with the built-in editor .

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

If I have config something like

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

and I need to change { name: 'styles' } to individual, for example, I need the following functions:

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

therefore I need to know all these names and when (contexts) to use the properties "name", "elements", "groups" with these names. I am making a mistake if I use the "elements" in the toolbarGroups property, or if instead of "FontSize" instead of "Fontsize" instead of "Fontsize". Also, with addButtonCommand and others, I need to know any valid parameter. WRONG to determine

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

but it’s hard to work without knowing “all valid name lists” for each context.

( More practical examples , edit @MahanGM comment)

If I use this manual and v4 instructions (this is equivalent to this v3 ), when using CKEditor4 and the built-in editor, I have "name problems":

  • Is the "standard CKEditor toolbar" a "full toolbar"?

  • If I take off "spellchecker" (old v3 name is "SpellChecker"), why not work? and why do you need to shoot also "Scayt"?

  • What names can I use with the built-in editor? When are groups used and when are elements in the editor.config.toolbar array editor.config.toolbar ?

  • ... etc. (read my question: the whole problem is the right choice of a valid name in the context) ... The programmer needs a "full formal specification ", and not just keys and pieces of information.

+4
source share
2 answers

(this is not an answer, but a proposal for it, you can copy / paste to publish your own).

(here you can also edit the text)

Element by Element Configuration

Your editor will work just like in your “toolbox definition”: a simple JavaScript array,

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

monitoring "each individual toolbar in the toolbar" by its contents and determining their exact position. Toolbar definitions, G i , can be arrays or strings:

  • When G i is a string, this is the string separator of the string, '/' ;
  • When G i is an array, it is a sequence (alias "group") of button names (alias "element").

So, the general view of the array of tool definitions is

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

where ITEM i, j is a valid button name . At ABNF ,

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

Scenarios (which define "namespaces") of the configuration in August 2013, with CKEditor v4:

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

  • Others that have fewer plugins or less code.

  • Others that have more (officially registered namespaces).

Program context in which BUTNAME valid:

  • the connected plug-in is installed (see the table "Full list of valid BUTNAME") (see scenarios 1, 2 or 3);

  • BUTNAME is not in the config.removeButtons list, nor the associated plugin has been removed in config.removePlugins ;

  • ... BUTNAME is defined for this version of CKEditor (for example, use "spellchecker" for v4 and "SpellChecker" for v3).

All registered plugin names

See config.plugins in script-1, this is a list of all valid names for plugins (alphabetical 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?

Are they also a "plugin" or an "extraplugin"? See Scenario 3:

  texttransform, etc.

PS: with script-1. in the plugins/ directory plugins/ we only have

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

Complete List of Valid BUTNAMEs

The specification of all names and their associated contexts. Plugins have the suffix "-1" or "-3" to remember the script "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 completed if we can complete this table!)

+1
source

This section from the 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 used in native init:

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

Hope this helps.

0
source

Source: https://habr.com/ru/post/1498935/

More articles:


All Articles