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, 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)

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)