Extension:WikiEditor/Toolbar customization

If you're just here to get some quick code that you can copypaste into your user JS and will just work out of the box, see the customizations library. The rest of this article explains the technical details of customizing the toolbar and requires a basic level of understanding of JavaScript.

Configuration structure
The toolbar widget is defined by a configuration object. You can look at the configuration for the default toolbar to see how you can modify the toolbar. Complete documentation is to be written shortly.

You can modify the toolbar even after it's been built by calling the  function on the textarea. You will need to do this inside an  call, though. '''This is not currently good enough, as you can end up getting called before wikiEditor initializes to begin with and it breaks. See the special section events below for a workaround.''' Notice: Can someone explain this sentences more clearly please? Where, when, how? give an example in an extension... please. is not understandable for beginners: where to put the below examples please. Sorry to have put this asking here, but these precisions are really needed

action

 * type: one of "encapsulate", "replace", "callback", "dialog"
 * options: for "encapsulate" or "replace" types, carries options for jquery.textSelection module (pre, peri, post); regex, regexReplace
 * execute: for "callback" type, a callable function which will be passed the WikiEditor context
 * module: for "dialog" type, named reference to a WikiEditor add-in dialog module to open

Example:

'action': { 'type': 'encapsulate', 'options': { 'pre': "'''", 'periMsg': 'wikieditor-toolbar-tool-bold-example', 'post': "'''" }       }    }

button

 * type: "button"
 * icon string required: short key name or URL to icon
 * label string: non-localizable label string
 * labelMsg string: key for localizable message string
 * 

booklet

 * type: "booklet"
 * label string: non-localizable label string
 * labelMsg string: key for localizable message string
 * deferLoad boolean
 * pages object: map of name keys to further objects:
 * layout string required: 'table' or 'characters'
 * label string: non-localizable label string
 * labelMsg string: key for localizable message string
 * headings string[]: array of objects? {textMsg: key} ??
 * rows object[] optional?: array of objects? {'row key name': {message object?}}
 * characters string[] optional?: array of strings of little character bits for insertion (???!)

Q: How can we receive an event or callback when our booklet gets triggered?

Existing sections
The default WikiEditor toolbar has the following sections:
 * The main section which is always visible, with the groups format and insert.
 * The advanced section, with the groups heading, format, size, insert and search.
 * The characters section, with pages latin, latinextended, ipa, symbols, greek, cyrillic, arabic, hebrew, bangla, telugu, sinhala and gujarati
 * The help section, with pages format, link, heading, list, file, reference and discussion.

Removing things
Use the removeFromToolbar call in Vector.js to remove buttons from the toolbar. The following example removes the Search and Replace button:

Modifying things
Warning: Binding doesn't seem to work with  but does work if called with addOnloadHook.

A working example could be found at the bottom of ru:MediaWiki:ToolbarNew.js

We don't really have a nice API to modify things, unfortunately. The best we have is a hook to change the configuration of a section just before it's being built: