Difference between revisions of "User:King of Herdaz/Toolbar customization"
m (→Basic: made the code collapsible) |
m (→Premade buttons: made the code collapsible) |
||
| Line 47: | Line 47: | ||
For example, if you have <code><nowiki>Shallan.jpg</nowiki></code> highlighted when you press the button it will result in this: <code><nowiki>{{image|Shallan.jpg|side=|width=|caption}}</nowiki></code> |
For example, if you have <code><nowiki>Shallan.jpg</nowiki></code> highlighted when you press the button it will result in this: <code><nowiki>{{image|Shallan.jpg|side=|width=|caption}}</nowiki></code> |
||
| + | {| class="mw-collapsible mw-collapsed" width=100% |
||
| + | |- |
||
| + | | |
||
| + | |- |
||
| + | | |
||
<pre> |
<pre> |
||
// Adding image template button to the "main" section |
// Adding image template button to the "main" section |
||
| Line 68: | Line 73: | ||
}); |
}); |
||
</pre> |
</pre> |
||
| + | |} |
||
=== Category === |
=== Category === |
||
This button will paste <code><nowiki>[[Category:</nowiki></code> and <code><nowiki>]]</nowiki></code> around your highlighted text. |
This button will paste <code><nowiki>[[Category:</nowiki></code> and <code><nowiki>]]</nowiki></code> around your highlighted text. |
||
| + | {| class="mw-collapsible mw-collapsed" width=100% |
||
| + | |- |
||
| + | | |
||
| + | |- |
||
| + | | |
||
<pre> |
<pre> |
||
// Adding category button to the "main" section |
// Adding category button to the "main" section |
||
| Line 93: | Line 104: | ||
}); |
}); |
||
</pre> |
</pre> |
||
| + | |} |
||
== Removing default elements == |
== Removing default elements == |
||
Revision as of 04:36, 24 October 2021
The editing toolbar is a versatile and very useful tool that can be used to make working on the wiki much easier. While the basic version (which is an option in your preferences) has some use, the main benefit comes when you customize your toolbar. In this guide there is a list of premade buttons that you can use as is as well as a guide to creating and modifying your own buttons and dropdowns.
Basic
Before you can customize your toolbar you need to have the "Enable the editing toolbar" option in your preferences selected. Once you have done this you are ready to begin.
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.
Premade buttons
Simply paste any of these premade buttons into your /common.js page between the two #Basic sections to add it to the main section of your toolbar (which is the top row that is always showing).
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: "]]"
}
}
}
}
});
|
Removing default elements
This can be a little tricky since in order to remove an element you need to know what it is named. To find the name you will have to comb through the page source or look through the code for the default version.
Fortunately, the names of many of the elements are known. Here are premade sections (I think there's a better word for this) of code for many of the elements in the default toolbar. Paste any one of them into your Common.js page within the two #Basic sections to remove that element.
//Remove the default <ref> button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'main',
'group': 'insert',
'tool': 'reference'
});
//remove the bulleted list button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'advanced',
'group': 'format',
'tool': 'ulist'
});
//remove the numbered list button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'advanced',
'group': 'format',
'tool': 'olist'
});
//remove the default <br> button so I can replace it a <br/> button which is preferred on the Coppermind
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'advanced',
'group': 'format',
'tool': 'newline'
});
//remove table button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'advanced',
'group': 'insert',
'tool': 'table'
});
//remove File button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'main',
'group': 'insert',
'tool': 'file'
});
//remove original link button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'main',
'group': 'insert',
'tool': 'link'
});
|