User:King of Herdaz/Toolbar customization
Jump to navigation
Jump to search
WIP of a guide to customizing the editing toolbar
Basic
Add the following to your /common.js
page:
//customize toolbar var customizeToolbar = function() { /* Your code goes here */
Followed by this:
}; /* * Check if view is in edit mode and that the required modules are available. Then, customize the toolbar... * Don't touch below this line! */ if (['edit', 'submit'].indexOf(mw.config.get('wgAction')) !== -1) { mw.loader.using('user.options').then(function() { // This can be the string "0" if the user disabled the preference ([[phab:T54542#555387]]) if (mw.user.options.get('usebetatoolbar') == 1) { $.when( mw.loader.using('ext.wikiEditor'), $.ready ).then(customizeToolbar); } }); }
You will place any modifications to the toolbar that you make between these two sections.
Sample buttons
Simply paste any of these premade buttons into your /common.js
page between the two basic sections to add it to your toolbar.
Image template
Clicking this button will paste the {{image}}
template on to the page, encapsulating your cursor or whatever you have highlighted.
For example, if you have Shallan.jpg
highlighted when you press the button it will result in this: {{image|Shallan.jpg|side=|width=|caption}}
// Adding image template button to the "main" section $('#wpTextbox1').wikiEditor('addToToolbar', { section: 'main', group: 'insert', tools: { "category": { label: 'Image template', type: 'button', icon: '//upload.wikimedia.org/wikipedia/commons/d/d8/Vector_toolbar_insert_image_button.png', action: { type: 'encapsulate', options: { pre: '{' + '{image|', post: '|side=|width=|caption}}' } } } } });
Category
This button will paste [[Category:
and ]]
around your highlighted text.
// Adding category button to the "main" section $('#wpTextbox1').wikiEditor('addToToolbar', { section: 'main', group: 'insert', tools: { "category": { label: 'Category', type: 'button', icon: '//upload.wikimedia.org/wikipedia/commons/2/2d/Button_clipboard_category.png', action: { type: 'encapsulate', options: { pre: "[[Category: ", post: "]]" } } } } });