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:

hookEvent( 'load', function(){
	// To add a toolbar section:
	$j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
		'sections': {
			'emoticons': {
				'type': 'toolbar', // Can also be 'booklet'
				'label': 'Emoticons'
				// or 'labelMsg': 'section-emoticons-label' for a localized label
			}
		}
	} );


	// To add a group to an existing toolbar section:
	$j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
		'section': 'emoticons',
	'groups': {
			'faces': {
				'label': 'Faces' // or use labelMsg for a localized label, see above
			}
		}
	} );

	// To add a button to an existing toolbar group:
	$j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
		'section': 'emoticons',
		'group': 'faces',
		'tools': {
			'smile': {
				label: 'Smile!', // or use labelMsg for a localized label, see above
				type: 'button',
				icon: 'http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Gnome-face-smile.svg/22px-Gnome-face-smile.svg.png',
				action: {
					type: 'encapsulate',
					options: {
						pre: ":)" // text to be inserted
					}
				}
			}
		}
	} );
});

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<references />" and "==See also==\n* item\n* item", while Templates menu will have {{Quote|text}} and {{Otheruses|foo|bar|link}} etc.

Yonidebest 06:07, 23 June 2010 (UTC)

BTW, the currect booklet example gives an error. 213.8.121.230 18:07, 24 June 2010 (UTC)

Moving buttons is not supported very well yet. We do intend to support this in the future. As a workaround, you can look up the button's definition here, add it to the main menu and remove it from the advanced menu.

What exactly do you mean by "canceling" an empty menu? Removing it? Mayve you can try to avoid creating empty menus in the first place?

You can create a special characters menu by creating a booklet, then creating one or more special characters pages in it (first and third booklet examples). These examples work just fine for me, what's the error you get? --Catrope 19:29, 25 June 2010 (UTC)

Re removing an empty group: If all the "Advanced" icons are moved to the main toolbar, the "Advanced" menu will be empty and thus need to be removed too.

The error I receive is: page is not defined, file: [1], row 314, using FF3.5.6. Thank you, Yonidebest 20:21, 25 June 2010 (UTC)

Also, how do I add a vertical line between the groups? I created a new group (with no label) at the end of the advanced section, but there is no line to separate the groups. Yonidebest 20:27, 25 June 2010 (UTC)

Icons for added toolbar buttons

If custom buttons are added to Vector's enhanced toolbar, which icons should they use?

Until bug 23624 is resolved there's no easy way to configure buttons on the enhanced toolbar. The JS wizards of the Hebrew Wikipedia added several buttons to the toolbar - Strikeout (<s></s>) near Bold and Italic, and in the advanced part:

• add formula - <math> n^2 (example)</math>
• text color - <span style="color: ColorName;">colored text</span>
• underline - <u>underlined text</u>
• comment - <!-- hidden comment -->
• center - <center>centered text</center>
• left-to-right text - <div style="direction: ltr;">left-to-right text</div>
• source code - <syntaxhighlight lang="text">source code</syntaxhighlight>
• tab - adds a tab character
• &nbsp;
• &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.9B.D7.A4.D7.AA.D7.95.D7.A8.D7.99.D7.9D .D7.9C.D7.A1.D7.A8.D7.92.D7.9C .D7.94.D7.97.D7.93.D7.A9, 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

• The advanced section, with the groups heading, format, size, insert and search.

--Ken Roy 14:20, 16 March 2011 (UTC)

How to add a Booklet

If you use the Example and get the error Uncaught exception: ReferenceError: Undefined variable: page, then try this:

// To add a booklet section:
$j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
        'sections': {
                'info': {
                        'type': 'booklet',
                        'label': 'Info'
                        'pages': {
                                'colors': {
                                        'layout': 'table',
                                        'label': 'Colors',
                                        'headings': [
                                                { text: 'Name' }, // or use textMsg for localization, see also above
                                                { text: 'Temperature' },
                                                { text: 'Swatch' }
                                        ],
                                        'rows': [
                                                {
                                                        'name': { text: 'Red' },
                                                        'temp': { text: 'Warm' },
                                                        'swatch': { html: '<div style="width:10px;height:10px;background-color:red;">' }
                                                },
                                                {
                                                        'name': { text: 'Blue' },
                                                        'temp': { text: 'Cold' },
                                                        'swatch': { html: '<div style="width:10px;height:10px;background-color:blue;">' }
                                                },
                                                {
                                                        'name': { text: 'Silver' },
                                                        'temp': { text: 'Neutral' },
                                                        'swatch': { html: '<div style="width:10px;height:10px;background-color:silver;">' }
                                                }
                                        ]
                                }
                        }
                }
        }
} );

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 < and > from? for example, (below) code shoots <file><File Link Here></file>

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': "<file>",
                                                       'periMsg': 'File Link Here',
                                                       'post': "</file>",
                                                       'ownline': true
                                               }
                                       }
                               }
                       }
               } );
       } );
}

periMsg applies only if you're using a system message for your text (in your case, MediaWiki:File_Link_Here). If you are supplying literal text, as is the case here, use peri instead.

When a system message is undefined, it appears as <name of message>. That's what you're seeing. Maiden taiwan 19:46, 2 November 2011 (UTC)

• 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.

...
'pre': "<file>",
'periMsg': 'wikieditor-toolbar-tool-filelink-example',
'post': "</file>",

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

<file><wikieditor-toolbar-tool-filelink-example></file>

any idea?

Yes. Every system message used by the toolbar needs to be registered with ResourceLoader. See the example here, where it says 'messages'. 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. $(document).ready(function() {}); 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. --[[kgh]] 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:

						'table': {
							'labelMsg': 'wikieditor-toolbar-tool-table',
							'type': 'button',
							'icon': 'insert-table.png',
							'offset': [2, -1942],
							'filters': [ '#wpTextbox1:not(.toolbar-dialogs)' ],
							'action': {
								'type': 'encapsulate',
								'options': {
									'pre': "{{#!: {| class=\"wikitable\" border=\"1\"\n|",
									'periMsg': 'wikieditor-toolbar-tool-table-example-old',
									'post': "\n|} }}",
									'ownline': true
								}
							}
						},

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. — Preceding unsigned comment added by 79.202.220.151 (talk • contribs) 09:51, 19 March 2012‎

Completely useless page for the current MediaWiki

Nothing described here works in the current MediaWiki. Most important $('#wpTextbox1').wikiEditor does never exists nor works no matter where or when I call it. I tried to put it into an buildSection event as described here and $('#wpTextbox1').wikiEditor 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 hookEvent('load', ...) 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 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 Mediawiki:Common.js but the buttons will not show up. I also tried to put the code in User:<username>/common.js 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 Mediawiki:Common.js, works fine in MW 1.17.2:

/* custom code for WikiEditor --------------------------------- start */
 
function customizeToolbar() {
 
	// adds <onlyinclude> 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: "<onlyinclude>",
											post: "</onlyinclude>"
									}
							}
					}
			}
	});
 
}
 
/* 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 Common.js 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

mw.loader::execute> Exception thrown by ext.wikiEditor.toolbar: actions is undefined

so I guess it loads too early? Are there some more dependencies I should add?

(function ($, mw) {
    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','jquery.wikiEditor.toolbar.config'], function() {
 
                    $( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
                        'section': 'characters',
                        'page': 'symbols',
                        'characters': [ '\u02be', '\u02bf' ]
                    });
 
                });
            }
        });
    }
}(jQuery, mediaWiki));

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;

(function ($, mw) {

    function addChars() {
         $( '#wpTextbox1' ).bind( 'wikiEditor-toolbar-buildSection-characters', function( event, section ) {
            section.pages.symbols.characters.push('\u02be', '\u02bf');
        });
    }
    
    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() {
                    addChars();
                });
            }
        });
    }

}(jQuery, mediaWiki));

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

Suppress resizing icons?

When I add an icon it is resized to width="22" height="22". 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: '<markiert>',
                                type: 'button',
                                icon: '.../button.png',
                                action: {
                                        type: 'encapsulate',
                                        options: {
                                                pre: "<foo>",
                                                peri: "",
                                                post: "</foo>"
                                        }
                                }
                        }
                },
        });
});

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

mw.loader.using('user.options',
	function()
	{
		if (mw.user.options.get('usebetatoolbar'))
		{
			mw.loader.using('ext.wikiEditor.toolbar',
				function()
				{
					$(document).ready(
						function()
						{
							$('#wpTextbox1').wikiEditor('addToToolbar',
								{
									/* … */
								}
							);
						}
					);
				}
			);
		}
	}
);

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 $(document).ready() call because it looked like it's useless. You see, it's nested in two mw.loader.using() 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 Math.random() 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 mw.loader.using() 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:

$(document).ready( function() {
  $('#wpTextbox1').on('wikiEditor-toolbar-doneInitialSections', function() {
  });
});

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:

$(document).ready(function() {
	console.log('document ready');
	console.log(document.getElementById('wpTextbox1'));
 
	$('#wpTextbox1').on('wikiEditor-toolbar-doneInitialSections', function() {
	  	console.log('edit toolbar loaded');
	});
});

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)

I am also facing the same issue. Can't add any text. The documentation says "icon string required: short key name or URL to icon" if I add any text, nothing shows.--Jnanaranjan sahu (talk) 12:21, 5 December 2018 (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: 'This text contains ", \' and \n.'. Alternativelly, you can use: "This text contains \", ' and \n.". 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. --Sophivorus (talk) 18:19, 23 January 2016 (UTC)

$( '#wpTextbox1' ).on( 'wikiEditor-toolbar-doneInitialSections', function () {
	mw.loader.using( 'ext.wikiEditor.toolbar', function () {
		$( '#wikiEditor-ui-toolbar *[rel="' + value + '"]' ).remove();
	});
});

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:

<span class="inputSpan">
<textarea tabindex="45" name="Auto taxobox[sinonimai]" id="input_53" class="wikieditor createboxInput autoGrow" rows="5" cols="90" style="width: auto"></textarea>
</span>

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: class=blabla 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)

It is perhaps a bit late to answer George Orwell III's question, but in case Aldous Huxley IV needs to know: To remove a single character subset (more generally booklet page), say Lao, do as follows:

	$( function() {
		 if ( typeof $.fn.wikiEditor != 'undefined' ) {
			   $( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
					  'section': 'characters',
					  'page': 'lao',
			   });
		 }
	});

To remove two, say "Arabic extended" and Bangla:

	$( function() {
		 if ( typeof $.fn.wikiEditor != 'undefined' ) {
			   $( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
					  'section': 'characters',
					  'page': 'arabicextended',
			   });
			   $( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
					  'section': 'characters',
					  'page': 'bangla',
			   });
		 }
	});

Henryfunk (talk) 10:05, 2 November 2018 (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

---

Not a silly question. But for me a silly answer. ;-) I know about MideaWiki:Common.js, but don't know exactly how to "add a function." 69.203.102.97 02:14, 24 July 2018 (UTC)

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:

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.

— Preceding unsigned comment added by Iowajason (talk • contribs) 00:16, 12 August 2016‎ (UTC)

Ehm, not not sure where you are getting this from, but this seems to be mostly wrong.

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

So most likely your old code wasn't async ready. —TheDJ (Not WMF) (talk • contribs) 09:06, 16 September 2016 (UTC)

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 [[{{PAGENAME}}/text|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)

Echo the sentiment that local icons are hard to use in an extension. The options seem to be full path or server level path, both of which include the wiki name. Anyone have an idea on how to parameterize the equivalent of server side $wgScriptPath in ResourceLoader based JavaScript?

Iowajason (talk) 23:41, 25 March 2017 (UTC)

@Manu3d and Iowajason: I don't know if it's the best way, but one solution is:

icon: mw.config.get( 'wgExtensionAssetsPath' ) + '/YourExtName/resources/icon.png',

Sam Wilson 04:50, 14 March 2018 (UTC)

Before Format group

Is it possible to create a group before the 'format' group in main section? Iniquity (talk) 18:16, 21 October 2016 (UTC)

Custom icons not showing up in Preview

Dear WikiEditor team, I have successfully added a number of buttons to the main toolbar (i.e. for strikeout and underline). However, they only appear when the edit tab is first clicked on. If I click on Show Preview, the editor loses the additional buttons. Is there a solution for this? Or did I configure something wrong? Kind regards -- manu3d (talk) 21:01, 21 October 2016 (UTC)

Custom buttons don't always show up in the editor window

Tracked in Phabricator
Task T30563

I have successfully added a whole lot of custom edit buttons, but whether they actually show up when editing a given page is hit and miss. Sometimes they're there, sometimes they're not. Is this something to do with how I have implemented the site, or is it something to do with my browser (IE11, significantly constrained by Orwellian workplace policies). ElectricRay (talk) 10:08, 20 September 2017 (UTC)

I have experienced this problem too, for the last few months (maybe even a year), and I believe it is some kind of race condition, but I was not able to debug it and find a cause/workaround. Maybe TheDJ or Krinkle know of changes to MediaWiki code that would make the documented setup outdated (and not guaranteed to work)? Helder 12:49, 30 December 2017 (UTC)

@TheDJ, Krinkle, Matma Rex: do you know what is the supported way to add/remove buttons (without them disappearing sporadically)?

Maybe I should try something with mw.hook('resourceloader.loadEnd').add( ... ), as Perhelion did on his script?

Or is it the $( '#wpTextbox1' ).on( 'wikiEditor-toolbar-doneInitialSections', ... ) the appropriated way? Helder 12:24, 1 February 2018 (UTC)

Yes, I had the same (more or less annoying) problem before (tried a bunch of methods, which some are anyway now deprecated, as you know: phab:T165112), now it seems, the buttons always appear. → User: Perhelion 12:39, 1 February 2018 (UTC)

This hook seems never documented and has been removed in "1.32.0-wmf.6". → User: Perhelion 09:03, 5 June 2018 (UTC)

I mentioned this on phab:T30563. → User: Perhelion 21:49, 13 September 2018 (UTC)

Callback after all animations are finished?

Hello! Sometimes the textarea isn't resized properly after our customizations and we can't see the first two lines of wikitext of the editor.

We tried to fix it manually in this way, but without success:

// Lot of customizations
// $textbox.wikiEditor( 'addToToolbar', { } );

// Our attempt to fix the problem
$textbox.on( 'wikiEditor-toolbar-doneInitialSections', function () {
	// This don't fix the problem only because it fires too early
	$textbox.resize();
} );

Do you know this problem? How to fix it? Thanks! If it can help in triaging, our work is here and runs in our user common.js. --Valerio Bozzolan (talk) 18:38, 28 November 2017 (UTC)

Hello Valerio Bozzolan, can you please may be more concrete? Is it only for groups? I use long-time customized groups and never saw such behavior.

PS: Maybe it should be more clear mentioned in the docu, that we can put several objects at once with $textbox.wikiEditor( (as it is used 68 times in your script, which makes possible a huge browser-reflow, “the most expensive [browser] operation of em’ all, the infamous reflow.”).‘Don’t touch my DOM, bro’ → User: Perhelion 20:14, 1 February 2018 (UTC)

@Perhelion: Exactly, but I think that your suggestion is applicable only for sections right now, isn't it? Actual code --Valerio Bozzolan (talk) 23:38, 1 February 2018 (UTC)

@Perhelion: Up O:) --Valerio Bozzolan (talk) 10:54, 27 July 2018 (UTC)

@Valerio Bozzolan: What you can do is collect groups together: [2] PS: module 'ext.wikiEditor.toolbar' is now 'ext.wikiEditor'. → User: Perhelion 13:04, 12 August 2018 (UTC)

@Perhelion: Thank you for the suggestion. Now, also thanks to this great example, everything is incapsulated in one great call, but... the problem sussists. See my commons.js and my script. At this point we really don't know how to handle this problem without doing ugly hacks with timeouts. --Valerio Bozzolan (talk) 17:30, 23 August 2018 (UTC)

I've seen the source code of the toolbar and I think that I have no other ways to do it. I described a proposal in phab:T202887. --Valerio Bozzolan (talk) 12:22, 27 August 2018 (UTC)

@Valerio Bozzolan: I can't reproduce. Anyway, this should only appear on expanded toolbars!? This is handled over a cookie, which you could remove on start.

$.removeCookie('wikiEditor-0-toolbar-section', { path: '/' });

You can also specify a concrete tab with if ($.cookie('wikiEditor-0-toolbar-section') === 'community') → User: Perhelion 08:41, 15 September 2018 (UTC)

Dropdown Picker?

How to add a dropdown picker to toolbar? thx Johnywhy (talk) 09:04, 13 May 2018 (UTC)

Yes, the documentation is patchy, I added Extension:WikiEditor/Toolbar_customization #Add_a_drop-down_picklist. → User: Perhelion 11:24, 13 September 2018 (UTC)

addToToolbar not working

$('#wpTextbox1').wikiEditor('addToToolbar', { ... no longer works for me in my common.js. Did something change? @Perhelion --Victar (talk) 20:23, 11 February 2019 (UTC)

Hello Victar, the module name 'ext.wikiEditor.toolbar' is now 'ext.wikiEditor'. → User: Perhelion 20:32, 11 February 2019 (UTC)

Ah, thanks, Perhelion. --Victar (talk) 20:36, 11 February 2019 (UTC)

GoogleTranslate

I am looking into if I can possebly revive and integrate Extension:GoogleTranslate to WikiEditor. --AssetDenmark (talk) 12:43, 16 May 2019 (UTC)

The extension loads fine, but I made the extension some years ago... and I dont even know if it is likely to work still? I did make two diffrent WikiEditor toolbar "extensions" (see below) - and I know that i need to do something like a 'callback', but can someone explain to me just a "bit" more how you can handle the context...

action: {          type: 'callback',
                execute: function(context){
                       indentSelection();
                }
      }

The function i will call should build on this function ls_ajax_onload() - but I need to figure out if i can still use the same function. Say, the extension will try to add a new page, with the language specified. When doing this this is the core of the code (not really happy about the code but it did work, somehow):

                transl.onclick = function () {
                  	google.load("language", "1");
                    var myTranslate=function(el,str,startPos, endPos) {
                          return function(result){
                            if(!result.error) { 
                            	 var strX = "Visit W3Schools.\n Learn JavaScript."; 
                               var patt1 = /\n/;
                               var resultX = strX.search(patt1);
                           	
                              var x=el.innerHTML;
                              // + "/" +  startPos + "/" + endPos
                              // var myX = x.replace(str,result.translation + "/" +  startPos + "/" + endPos + " (" + resultX + ")\n");
                              var myX = x.replace(str,result.translation);
                              el.innerHTML=myX; 
									                }
										      else {
												var xx = result;    // Just to stop and see 
											  return result; } // or other error processing 

											}
  									}; 
             /*     	translate_text(document); */

	                  var from_lng = document.getElementById("google_translate_from").value;
	                  var to_lng = document.getElementById("google_translate_to").value; 
	                  
                    var el = document.getElementById("wpTextbox1");    
	                  var text = document.getElementById("wpTextbox1").innerHTML;
                    // var text = text.replace(/\x10/,/\n/);
	                  // var text = text.replace(/\x13/,/\r/);
	                  // text = textConv(text);

                    var mLen = text.length;
                    var tStart = nextStart(text); // In case there are '\n' to start?
                    var tNext = nextStop(text,tStart);
                    var xNext = 0; 
         
                   // The real translation takes off here!	         
	                 while (tNext < text.length) { 
	                    var wText = text.substring(tStart, tNext); 
									
                      google.language.translate(wText, from_lng , to_lng , myTranslate(el,wText,tStart,tNext) );
                      
                      tNext = tNext + 1;
                      tStart = tNext; 
                      var tStart = nextStart(text.substring(tNext)) + tStart; 
                      tNext = nextStop(text.substring(tStart)) + tStart;
                      
                      if (tNext == -1) { tNext =text.length; } 
                      
	                  }; 
	                  return;
                };

Toolbar one

$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
  'sections': {
    'Translate': {
      'type': 'booklet',
      'label': 'Translate',
      'pages': {
        'section-translate': {
          'label': 'Translate into',
          'layout': 'characters',
          'characters': [
    //        '<Danish>', '<English>',
            {
              'action': {
                'type': 'encapsulate',
                'options': {
                  'pre': '<da>',
                  'peri': '',
                  'post': '</da>'
                }
              },
              'label': '<da></da>'
            },
            {
              'action': {
                'type': 'encapsulate',
                'options': {
                  'pre': '<en>',
                  'peri': '',
                  'post': '</en>'
                }
              },
              'label': '<en></en>'
            }

          ]
        },
        'section-links': {
          'label': 'Wikilinks',
          'layout': 'characters',
          'characters': [
            {
              'action': {
                'type': 'encapsulate',
                'options': {
                  'pre': '[[Category:',
                  'peri': '',
                  'post': ']]'
                }
              },
              'label': '[[Category:]]'
            },
            {
              'action': {
                'type': 'encapsulate',
                'options': {
                  'pre': '[[File:',
                  'peri': '',
                  'post': ']]'
                }
              },
              'label': '[[File:]]'
            }
          ]
        }
      }
    }
  }
} );

Toolbar two

$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {

	section: 'advanced',
	groups: {
		list: {
			tools: {
				templates: {
					label: 'Translate to',
					type: 'select',
					list: {
						'en-button': {
							label: 'English',
							action: {
								type: 'encapsulate',
								options: {
									pre: '{{Translate to English}}'
								}
							}
						},
						'da-button': {
							label: 'Dansk',
							action: {
								type: 'encapsulate',
								options: {
									pre: '{{Translate to Danish}}'
								}
							}
						}
				
					}
				}
			}
		}
	}


} );

Re-add function customizeToolbar to the initial setup?

From these lines:

// Check if we're editing a page.
if ( [ 'edit', 'submit' ].indexOf( mw.config.get( 'wgAction' ) ) !== -1 ) {
	// Add a hook handler.
	mw.hook( 'wikiEditor.toolbarReady' ).add( function ( $textarea ) {
		// Configure a new toolbar entry on the given $textarea jQuery object.
		$textarea.wikiEditor( 'addToToolbar', {
			/* Your code goes here */
		} );
	} );
}

… and replace the line /* Your code goes here */ by the code which defines each button added. Multiple snippets can be added by simply pasting them below each other, inside of the function customizeToolbar.

But I don't see any function named customizeToolbar on the setup snippet.

Looking at the edit history, specifically this, it seems like someone refactored the code (removing that function along the way) without changing the rest of the page (which heavily depends on pasting the snippets to the function). So, simply pasting the snippets will no longer work.

So, maybe someone should re-add customizeToolbar quick function again? I tried to, but I didn't know how to do it. - SuperDragonXD (talk) 06:41, 1 March 2022 (UTC)

@SuperDragonXD: That was my fault, sorry! I've done a bit more editing now, and hopefully it's making more sense. There's still a bunch of places that pre-date the hook-handler method of modifying the toolbar, so I'll try to work through it all. Sam Wilson 10:08, 1 March 2022 (UTC)

Okay, thanks! SuperDragonXD (talk) 12:07, 1 March 2022 (UTC)

Thanks for modifying the page. But, I think you may have forgotten Extension:WikiEditor/Toolbar_customization/Library. (There might be other subpages that still state the old function). Could you change it? Thanks! SuperDragonXD (talk) 07:01, 6 March 2022 (UTC)

@SuperDragonXD: Good point, sorry. I've updated it now. I think there're lots more improvements that can be made to these docs! Sam Wilson 03:56, 9 March 2022 (UTC)

Accesskey

Is there any way to add an accesskey to our new toolbar button? Ignacio Rodríguez (talk) 19:04, 19 March 2024 (UTC)