Extension talk:WikiEditor/Toolbar customization: Difference between revisions

From mediawiki.org
Content deleted Content added
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 tha
Tag: 2017 source edit
Line 677: Line 677:


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). [[User:ElectricRay|ElectricRay]] ([[User talk:ElectricRay|talk]]) 10:08, 20 September 2017 (UTC)
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). [[User:ElectricRay|ElectricRay]] ([[User talk: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 [[User:TheDJ|TheDJ]] or [[User:Krinkle|Krinkle]] know of changes to MediaWiki code that would make the [[Extension:WikiEditor/Toolbar customization#Basic setup|documented setup]] outdated (and not guaranteed to work)? [[User:He7d3r|Helder]] 12:49, 30 December 2017 (UTC)


== Callback after all animations are finished? ==
== Callback after all animations are finished? ==

Revision as of 12:49, 30 December 2017

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

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

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

BTW, the currect booklet example gives an error. 213.8.121.230 18:07, 24 June 2010 (UTC)Reply
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)Reply
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)Reply
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)Reply

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 - <source lang="text">source code</source>
  • 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)Reply


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

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

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


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

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

Something like this:
$('#wpTextbox1').wikiEditor('removeFromToolbar', {
  'section': 'characters'
});

Maiden taiwan 15:11, 23 September 2011 (UTC)Reply

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

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

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


  • 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)Reply

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

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

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


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

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

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

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

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

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

I tried the unmodified example code from this documentation in one of the Wikipedias. It never works. --TMg 21:07, 4 February 2013 (UTC)Reply
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)Reply

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

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

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

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

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

Partially solved. "\n" works for line breaks. Texugo (talk) 12:18, 17 May 2013 (UTC)Reply
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)Reply

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)Reply
$( '#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)Reply

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

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

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

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

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

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

@Alex brollo: I requested this some time ago, but it was declined. Helder 17:16, 30 March 2015 (UTC)Reply
@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)Reply

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

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

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

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

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

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

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

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

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

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