Extension talk:WikiEditor/Toolbar customization

Problem with adding a new section
Hi, Adding buttons work fine, but adding a sections does not work that well. If you add a section, open it and reload the page the textarea will not be fully visible. Is there some easy way to refresh it's height?

Code used:

Is this a bug? Or maybe I'm doing something wrong. --Nux 02:48, 21 April 2010 (UTC)

Switching from Monobook
If you're just switching from Monobook and looking for a way to keep your mwCustomEditButtonse without too much hassle, see insertVectorButtons.js. This small script almost does it for you by translating the old way to the new way. Ofcourse if you're up for an adventure and/or want to use the more advanced feautures of the new toolbar you'll have to learn the native syntax (see examples here). If you have any questions about it, please let me know on my meta talkpage or the scripts talkpage. --Krinkle / Krinkle 23:13, 14 June 2010 (UTC)

Moving a button

 * 1) How can I move a button from the "advanced" menu to main menu?
 * 2) How can I cancel an empty menu?
 * 3) How can I create a custom menu based on the "special characters" menu? i.e. I'd like to add a new menu named "Codes & templates" where it'll have a submenu: Titles, Templates, Maintenance. Each submene will have a list of codes/templated. for example, Titles will have "==References==\n
 * tab - adds a tab character
 * &amp;nbsp;
 * &amp;rlm; (especially useful for RTL projects, although somewhat problematic in itself)

(I actually disagree with some of the additions, but that's not the point of this message.)

The icons that were used for these added buttons were either taken from Monobook or drawn ad hoc.


 * Is there a repository of icons for extra buttons?
 * If we create some new and better Vector-style icons by ourselves, where should we share them, so all language projects will be able to reuse them easily?
 * Is there a style guide for drawing Vector icons? --Amir E. Aharoni 08:44, 15 July 2010 (UTC)


 * I'd upload them to commons. Many old style buttons are already there, although a new category "Buttons for Vector skin" or so may be desirable. If you create new buttons, you should dual license them GPL to make sure there's no problem in potentially shipping them with mediawiki in the future. Platonides 00:04, 20 July 2010 (UTC)
 * I had asked the he.wiki graphics guys to create new icons, and they did w:he:%D7%95%D7%A7:%D7%A1%D7%93, but as it turns out, it needs to be done with transparent background, as there are diff background colors in the toolbar.
 * Re gallery, there already is a page for toolbar icons in commons: MediaWiki_edit_toolbar. Obviously more can be created and added to the page. 213.8.121.230 11:11, 20 July 2010 (UTC)

Please update
Please put more information on here. We were promised more information would be available but doesn't look updated at all. If not here, where else are we to turn to for help? :(

Adding buttons to WikiEditor in Useability Extension in MediaWiki 1.16.2
The information provided here appears to work for adding new sections and buttons to the WikiEditor within the Usability Initiative

However, for MediaWiki 1.16.2 WikiEditor as part of the Usability Extension, in order to add a button to the advanced section groups, you have to use list as the group name instead of format for the group name.

The Existing sections - advanced section groups shows --Ken Roy 14:20, 16 March 2011 (UTC)
 * The advanced section, with the groups heading, format, size, insert and search.

How to add a Booklet
If you use the Example and get the error Uncaught exception: ReferenceError: Undefined variable: page, then try this: The trick is to add an unempty booklet. 78.53.80.53

Adding a button on main toolbar MW1.17x
i'm still not clear on how to add a button on main tool bar. can someone give me some guidance? --12.46.139.200 23:46, 13 July 2011 (UTC)

I've found out that it doesn't work at all in MW1.17.

But I got it working flawlessly using the examples of the main page on MW1.18a

Luis Orlando, 28 October 2011

Example of moving the Help section?
I'd like to add a section to the toolbar in between "Special characters" and "Help", so the Help setion remains the last, rightmost section. Could you please show an example of how to do this? Thank you. Maiden taiwan 16:59, 15 August 2011 (UTC)

Removing special characters section
After much pain and trial-and-error, I still haven't been able to remove the special characters section.

Can anyone kindly provide a few lines of suggestions on how to do it? Dc321 06:02, 5 September 2011 (UTC)
 * Something like this:

$('#wpTextbox1').wikiEditor('removeFromToolbar', { 'section': 'characters' }); Maiden taiwan 15:11, 23 September 2011 (UTC)

I only succeeded adding, removing and modifying the editor toolbar after I upgraded to mediawiki 1.18a

Here is what I used to remove the special characters section: $( function {            if ( typeof $.fn.wikiEditor != 'undefined' ) {                   $( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', { 'section': 'characters', });            }        }); Luis Orlando - 28 October 2011


 * I have done extensive modifications to the toolbar in 1.17.0: adding buttons, removing buttons, adding dropdowns, creating dialogs. In a few cases, I could not get a button icon to display for unknown reasons. Perhaps that was a bug that got fixed in 1.18? Maiden taiwan 15:15, 28 October 2011 (UTC)

How do I remove not the whole characters section, but only one of the character sets (pages) within? Can this only be fixed in jquery.wikiEditor.toolbar.config.js or also in MediaWiki:Common.js?
 * Ribe (talk) 10:30, 4 June 2012 (UTC)

Creating Example "periMsg" part
my new button is showing up, but i have issue with the "periMsg" part.

Where is it getting that from? for example, (below) code shoots     < File Link Here > 

if ( typeof $j != 'undefined' && typeof $j.fn.wikiEditor != 'undefined' ) { $j( function {               $j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', { 'section': 'main', 'group': 'insert', 'tools': { 'comment': { 'label': 'FileLink', 'type': 'button', 'icon': 'http://someweb.com/insert-filelink.png', 'action': { 'type': 'encapsulate', 'options': { 'pre': " ", 'periMsg': 'File Link Here', 'post': " ", 'ownline': true }                                       }                                }                        }                } );        } ); }


 * applies only if you're using a system message for your text (in your case, ). If you are supplying literal text, as is the case here, use   instead.
 * When a system message is undefined, it appears as . That's what you're seeing. Maiden taiwan 19:46, 2 November 2011 (UTC)

... 'pre': " ", 'periMsg': 'wikieditor-toolbar-tool-filelink-example', 'post': " ",
 * THANKS a MUNCH for clarifying.  I got it working with peri  (no periMsg), but i can't seem to get the periMsg to work even if have message for it.

MediaWiki:Wikieditor-toolbar-tool-filelink-example has 'testing filelink example' written in it. returns 

any idea?


 * Yes. Every system message used by the toolbar needs to be registered with ResourceLoader. See the example here, where it says . You need an entry in the messages array for every system message used by the toolbar -- putting them in your .i18n.php file is not sufficient. Good luck. Maiden taiwan 00:48, 3 November 2011 (UTC)

Thanks!! i was able to mod the WikiEditor.php and add in the line for it BTW: -holy cow! i have your book. i want an autograph!

Configuration structure
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

Post by Lamidesbetes. Moved from manual page. --&#91;&#91;kgh&#93;&#93; 18:51, 31 January 2012 (UTC)

Edit an existing button
How do you edit an already existing button? This rather simple task is not working for me. I've modified the following section in ext.wikiEditor.toolbar.js but the changes don't have any effect: The modified parts are the wiki syntax in the pre and post attribute. I'd like to add the parser function {{#!: to this button. Obviously I'm missing something here as not even random changes are displayed when using the modified button. The changes are not applied at all. Any help is much appreciated. {{unsigned2|09:51, 19 March 2012‎|79.202.220.151}}

Completely useless page for the current MediaWiki
Nothing described here works in the current MediaWiki. Most important  does never exists nor works no matter where or when I call it. I tried to put it into an  event as described here and   is defined when I do so but my button never shows up. Could somebody please, please either fix this page or fix the broken MediaWiki? Same problem with the old toolbar. I'm still able to add a button but can not assign a function to it any more, no matter if I use  or what. Yes, I'm complaining. --TMg (talk) 08:51, 30 March 2012 (UTC)
 * Have you tried the code suggested on Extension:WikiEditor/Toolbar customization/Library? It works for me. Helder 23:17, 31 March 2012 (UTC)
 * I went ahead and did an [//www.mediawiki.org/w/index.php?title=Extension:WikiEditor/Toolbar_customization&diff=prev&oldid=518288 update] to the main page as well. Feel free to make more improvements (or to fix eventual mistakes). Helder 01:24, 1 April 2012 (UTC)

No custom buttons in MW 1.18.2
We got a problem. We have a Wiki running on 1.17.2 with custom buttons in the WikiEditor, no problems there they work just fine. Yesterday I build a Wiki with MW 1.18.2 and used the same code in  but the buttons will not show up. I also tried to put the code in  but it makes no difference. Disabled all installed extensions except WikiEditor but still no luck. I noticed the documentation changed but I am a little lost because it just makes no sense. What are we doing wrong here? Any ideas? Thanks.


 * MediaWiki 1.18.2
 * PHP      5.3.8 (apache2handler)
 * MySQL    5.5.19

Code we use in, works fine in MW 1.17.2: /* custom code for WikiEditor - start */ function customizeToolbar { // adds button to toolbar $('#wpTextbox1').wikiEditor('addToToolbar', {			'section': 'advanced',			'group': 'format',			'tools': {					'strikethrough': {							label: 'onlyinclude',							type: 'button',							icon: '//xxxxxxx/img_auth.php/f/f9/xxxxxxxx.png',							action: {									type: 'encapsulate',									options: {											pre: " ",											post: " "									}							}					}			}	}); } /* Check if we are in edit mode and the required modules are available and then customize the toolbar */ if ($.inArray(mw.config.get('wgAction'), ['edit', 'submit']) != -1 ) { mw.loader.using( 'user.options', function {                if ( mw.user.options.get('usebetatoolbar') ) {                        mw.loader.using( 'ext.wikiEditor.toolbar', function  { $(customizeToolbar); } );               }        } ); } /* custom code for WikiEditor - end */ --Jongfeli (talk) 20:54, 23 April 2012 (UTC)

Found a sollution.

Added at the start: // Check that the toolbar is available if ( typeof $ != 'undefined' && typeof $.fn.wikiEditor != 'undefined' ) { // Execute on load $( function {

// Extra buttons code.....

}); }

Deleted at the end /* Check if we are in edit mode and the required modules are available and then customize the toolbar */ if ($.inArray(mw.config.get('wgAction'), ['edit', 'submit']) != -1 ) { mw.loader.using( 'user.options', function {                if ( mw.user.options.get('usebetatoolbar') ) {                        mw.loader.using( 'ext.wikiEditor.toolbar', function  { $(customizeToolbar); } );               }        } ); }

This works both in 1.17.2 and 1.18.2 The documentation has changed recently. Things are getting a little confusing here. In Extension:WikiEditor/Toolbar_customization from March 30 the part added in our code is still documented but in the latest revision it is gone. Do you need it when using  an MW 1.18.2? Regards, --Jongfeli (talk) 06:59, 24 April 2012 (UTC)

Adding characters
Hi, I'm trying to add some special characters to the symbols page. The code below works fine if I execute it from Firebug, but when I add it to my common.js, I get the error

so I guess it loads too early? Are there some more dependencies I should add? Danmichaelo (talk) 15:48, 28 April 2012 (UTC)
 * When I execute your code on Google Chrome's console, on edit mode, I get

TypeError: Cannot set property 'ʾ' of undefined
 * if the "Special Characters" section is hidden. On the other hand, it works fine if I execute it after clicking on the "Special Characters" header. So, it seems to be necessary to check if special characters section is available. I just don't know how exactly to do that.
 * I don't thing it is necessary to put 'jquery.wikiEditor.toolbar.config' in the "mw.loader.using", because the module "ext.wikiEditor.toolbar" already has that as a dependency (so it should be loaded by Resource Loader). Helder 18:43, 28 April 2012 (UTC)


 * Thanks, I had "Special characters" open all the time, so I didn't notice :) First I found the loadSection event, which appeared to work, but it doesn't bubble to #wpTextbox1, and I didn't find any information about it, so I was a little sceptical to rely on it, and ended up with the following code instead, which works;


 * Danmichaelo (talk) 15:04, 2 May 2012 (UTC)

Suppress resizing icons?
When I add an icon it is resized to. how can this be suppressed?

I use on MediaWiki:Common.js:

jQuery(document).ready(function ($) {       $('#wpTextbox1').wikiEditor('addToToolbar', { section: 'main', group: 'format', tools: { buttonId: { label: ' ', type: 'button', icon: '.../button.png', action: { type: 'encapsulate', options: { pre: " ", peri: "", post: " " }                               }                        }                },        }); }); --Subfader (talk) 13:42, 17 August 2012 (UTC)

Add custom button wiki 1.19
Can you add custom buttons? how?

Unpredictable behavior due to the broken resource loader design
The nesting required just to add a single button is ridiculous. (Yes, you can make this shorter by omitting some line breaks.) Who invented this stuff and why? If a user script is called at the end of the page how is it possible to fail? For example I tried to remove the  call because it looked like it's useless. You see, it's nested in two  calls. The document should be ready after this, shouldn't it? But it seems the line is required for some reason I don't understand. Without this line my button is not displayed sometimes. Like it's random. Why? Because of the resource loader stuff? What does it do? Is there a  call in the resource loader? It feels like.

Why isn't it possible to use a single line of code, like “my code depends on the WikiEditor module and should be executed afterwards”. Done. Not the crazy chain shown above.

Where is a list of the resource loader module names? (Like the ones in the two  calls above.) How should I know which module name is required for which function?

Why can't it just work?

I consider this a broken design. --TMg 12:48, 27 November 2012 (UTC)
 * I usually check the core module names at resources/Resources.php. I think solving bug 1 would help us to know which modules are required by which functions, but right now what I do is to look in the function's source code to see what it is using (it is not funny, but well...). Helder 19:39, 16 January 2013 (UTC)


 * So we came up with this, using a wikiEditor event:


 * TheDJ (talk) 10:52, 25 May 2013 (UTC)


 * I'm trying to do my toolbar customization by waiting on this event and it only works intermittently, even when I removed all my code leaving just this skeleton:

Adding currency symbols as a new special characters page
Hi all. I'm trying to add the functionality of clickable currency symbols in the toolbar to Wikivoyage. This can either be done through a new 'section' which can be expanded to show the currency symbols (preferable), or else a 'page' within the Special characters section which lists currency symbols. I've tried unsuccessfully in my local common.js here. I understand with JS you are meant to do all this fancy inspecting element and executing jQuery sort of stuff, but I'm unfortunately not skilled enough to know what to do. If anyone can give some advice or provide the code, it'd be much appreciated. JamesA (talk) 11:01, 1 February 2013 (UTC)
 * I tried the unmodified example code from this documentation in one of the Wikipedias. It never works. --TMg 21:07, 4 February 2013 (UTC)
 * Well that's no good. I guess someone needs to update the documentation to be a little more accurate and clearer. JamesA (talk) 08:26, 5 February 2013 (UTC)

Text rather than icon for buttons ?
Hi there. Thanks a bunch for all the work done and this nice help. I was wondering if rather than having an icon for every action we add, if we could add some piece of text instead ? I'm not a js/mw/programming guru but perhaps if the 'icon' field is not specified we could display the 'label' field instead in the toolbar? Thanks a lot for your help. Vincent Bonhomme.
 * Have you tried leaving out the icon and just using the tooltip? It used to run in the former add button toolbar. — billinghurst  sDrewth  01:58, 14 May 2013 (UTC)
 * It seems that this function disappeared after an update some months ago. When the icon is left empty the label is not displayed anymore. --Aschroet (talk) 19:06, 27 May 2016 (UTC)

Reorder buttons in toolbar
Hi all, is there a possibility to reorder the buttons in the toolbar of the WikiEditor? Or are they always displayed in the order they are created in their respective groups? Regards, --Patrick87 (talk) 23:27, 8 May 2013 (UTC)

What is a booklet?
I don't understand what is a booklet or how it is used. I don't find the text helps, nor have I seen an example to which one is referred. — billinghurst  sDrewth  01:57, 14 May 2013 (UTC)


 * There definitely needs to be some kind of improvement in the documentation text. It assumes the reader already has knowledge of how the toolbar works, and makes customising it fairly difficult for first-timers. JamesA (talk) 12:13, 14 May 2013 (UTC)

Inserting quotation marks and line breaks
I am creating some extra insert buttons, but the text I want to insert contains quotation marks and line breaks, both of which break the code and cause the buttons not to even load. I am no adept at this javascript stuff. I have tried things like div and span and nowiki and ascii codes, none of which work. Is there a way to do this? Texugo (talk) 03:14, 15 May 2013 (UTC)
 * Partially solved. "\n" works for line breaks. Texugo (talk) 12:18, 17 May 2013 (UTC)
 * Texugo, you can use something like this: . Alternativelly, you can use:  . Helder.wiki 18:36, 24 March 2014 (UTC)

Problems with removing
The sample script given for removing things seems to work for removing whole sections or for removing the simple buttons like the signature button, but I have been completely unable to remove more complex items, including the search and replace button for which the sample script was written. Specifically, I am trying to remove the reference button in the main bar, the reference help info under the help menu, and the gallery button under the advanced menu. Can anybody get a working script that will do those things? Please help! Thank you. Texugo (talk) 12:25, 17 May 2013 (UTC)
 * Three years later the problem continues. Here is a script that is able to remove any element, just replace 'value' with the name of the element (the 'rel' attribute). The Extension:MsWikiEditor incorporates it in a more sophisticated version. --Felipe (talk) 18:19, 23 January 2016 (UTC)
 * Many thanks; I was finally able to get rid of all those language-based Character Sets that I'd never use in a million years while retaining the ones I actually need -- and have it stay that way for a change. I'm even tempted to whack all the booklets and buttons loaded by default down to the div framework and [re]build it with my own groupings instead :) -- George Orwell III (talk) 21:09, 23 January 2016 (UTC)
 * Many thanks; I was finally able to get rid of all those language-based Character Sets that I'd never use in a million years while retaining the ones I actually need -- and have it stay that way for a change. I'm even tempted to whack all the booklets and buttons loaded by default down to the div framework and [re]build it with my own groupings instead :) -- George Orwell III (talk) 21:09, 23 January 2016 (UTC)

Custom buttons with WikiEditor in Semantic Forms
Problem is as "Custom buttons with WikiEditor in Forms". But I don't see generated textarea id's: 

How I can add custom buttons to the WikiEditor, witch is are used in this Semantic Forms. --Vpovilaitis (talk) 06:40, 30 May 2013 (UTC)
 * you can add a class to your field like that: and use $('.blabla') instead of $('#smth')--Katkov Yury (talk) 14:13, 29 March 2014 (UTC)


 * could you explain more detailed? I have the same problem and can't solve it. --132.187.49.23 14:51, 26 October 2015 (UTC)

How to remove single character sets?
I know this .... $( function {            if ( typeof $.fn.wikiEditor != 'undefined' ) {                   $( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', { 'section': 'characters', });            }        }); .... removes the entire special character section but I can't figure out how to only remove a single special character sub-set (or language?) from the section itself? Anybody know? -- George Orwell III (talk) 00:53, 10 August 2013 (UTC)

Font missing / Character Missing
On my local wiki I cannot insert any character which is unique to the Segoe UI Symbol font in Chrome. The symbols shows up fine in IE. Anyone know how fix that? I specifically need the Et character, U+204A. Thanks.RiverStyx23 (talk) 18:53, 22 March 2014 (UTC)

Base64-encoded icons
It'd be really nice if the addition script allowed for base64-encoded images, i.e. in the "icon" parameter. Does it support that, or can such support be added? Nihiltres (talk) 20:27, 8 April 2014 (UTC)

Customize wikieditor for every user
is it a way to customize the editor for every user? Like adding a button for everyone without editing extension core file on server?

Thx for help

EDIT: I figured, it was a silly question ;)

I had to add function on MediaWiki:Common.js page

Add e line to dropdown menu on heading menu in advanced
I would like to add a line on Heading menu, like something for heading 6

I am not able to customize wikiedit toolbar.

need help plz.

A disturbing difference between encapsulate and mw.toolbar.insertTag
Both encapsulate method of button object and mw.toolbar.insertTag do the same job but there's a disturbing difference: the former works into main textarea only (wpTextbox1), where the latter works into every focused textarea/text input area. Simply try here: the former (called by edit tools, at the bottom of the page) works too into Subject/headline; the latter (called by "new" toolbox buttons) doesn't, and it is deply wrong. encapsulate method should be edited IMHO. --Alex brollo (talk) 15:20, 30 March 2015 (UTC)
 * @Alex brollo: I requested this some time ago, but it was declined. Helder 17:16, 30 March 2015 (UTC)
 * @He7d3r My DIY solution: to avoid encapsulate method and to use a callback to mw.toolbar.insertTag for any new button. :-) --Alex brollo (talk) 07:45, 4 May 2015 (UTC)

1.26 update
MediaWiki version 1.26 appears to have changed the API and is not yet fully documented here. Some observations from my efforts: — Preceding unsigned comment added by Iowajason (talk • contribs) 00:16, 12 August 2016‎ (UTC)
 * 1) addToToolbar command is now addToModule.
 * 2) a new level "main" was added in the hierarchy and needs to be accounted for.
 * 3) sections command does not add a toolbar, use the toolbar keyword.
 * 4) Best practice seems to be to build one JSON object with all additions and add. This is a different approach than the examples on this page, which seem to reflect more granular and more numerous calls to the API. The OOTB toolbar builds one JSON object for the entire toolbar and invokes API once.
 * 5) Study of jquery.wikiEditor.toolbar.config.js may be the best  way to see how JS should use this API.
 * Ehm, not not sure where you are getting this from, but this seems to be mostly wrong.

So most likely your old code wasn't async ready. —Th e DJ (Not WMF) (talk • contribs) 09:06, 16 September 2016 (UTC)
 * 1) addToModule was always there, and the addition of the "toolbar" module is what adds the addToToolbar command. Thus if you are missing this addToToolbar command, your code is probably running too early. Please remember that within MediaWiki 1.26 all JS code runs asynchronously, so it is really important that you have the right declared dependencies and listen to the correct events (which admittedly are badly documented).
 * 2) "a new level "main" was added in the hierarchy and needs to be accounted for." That's not a new level. it has been there since the inception of the editor
 * 3) "sections command does not add a toolbar, use the toolbar keyword" You are probably confusion sections with types of sections. toolbar is a type of the main section of the toolbar, but you can also have booklets (characters and help).
 * 4) "Best practice seems to be to build one JSON object with all additions and add" well, if you are doing lots of modifications, especially when doing them server side, instead of gadgets, then yes, in that case, you could create your own module and add it. Default modules are "toolbar" and "dialogs", but the CodeEditor and Proofread Extension add their own modules for instance.
 * 5) "Study of jquery.wikiEditor.toolbar.config.js may be the best  way to see how JS should use this API." that be true :)

Backreferencing for the original text in encapsulate pre or post field
Can I reference for the original text in the encapsulate parameters?

I select a text in the editor, press the toolbar button and i want to replace it to text, so I need to reference the text in the pre field.

Local Icons
I managed to successfully customize the toolbar and I even added some symbols in the Special Characters/Symbols list: yay! For the toolbars, initially I hotlinked icons from uploads.wikimedia.org which kind of works but sometimes it doesn't, I'm guessing due to timeouts. I therefore stored the files locally (which is also fairer to wikimedia), in the extensions/WikiEditor/modules/images/toolbars directory. But if I simply write icon: 'Toolbar_Corchetes_Vector.png' in the javascript function the icons are not found. How can I get the system to find that path automatically? That's where the WikiEditor gets its default toolbar icons already! Meanwhile I've noticed I can use an absolute path already, in the form icon: '/webroot/w/extensions/WikiEditor/modules/images/toolbars/myImage.png' -- manu3d (talk) 12:15, 14 October 2016 (UTC)