Extension talk:WikiEditor/Toolbar customization
[edit] 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)
[edit] 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)
[edit] Moving a button
- How can I move a button from the "advanced" menu to main menu?
- How can I cancel an empty menu?
- 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)
[edit] 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
-
- ‏ (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)
[edit] 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? :(
[edit] 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)
[edit] 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
[edit] 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
[edit] 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)
[edit] 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)
[edit] 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
}
}
}
}
} );
} );
}
periMsgapplies 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, useperiinstead.- 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)
- Yes. Every system message used by the toolbar needs to be registered with ResourceLoader. See the example here, where it says
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!
[edit] 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] 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. —The preceding unsigned comment was added by 79.202.220.151 (talk • contribs) 09:51, 19 March 2012
[edit] 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)
[edit] 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)
[edit] 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)
