Autopatrolled, Editors
8,718
edits
Difference between revisions of "User:King of Herdaz/Toolbar customization"
User:King of Herdaz/Toolbar customization (edit)
Revision as of 19:52, 18 December 2023
, 5 months agono edit summary
m |
|||
| (25 intermediate revisions by the same user not shown) | |||
|
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 [[Special:Preferences#mw-prefsection-editing|preferences]]) has some use, the main benefit comes when you customize your toolbar. In this guide there are tested premade elements that you can use as well as guides to creating and modifying your own buttons, booklets, and dropdowns.
All modifications to the toolbar are made on your common.js subpage. To find your common.js page click on this link [[Special:MyPage/common.js]] and create the page (if you have not already done so).
While modifying your toolbar can seem scary, once you get the hang of it, it really isn't a big deal. Anything you do can be easily undone so feel free to play around and experiment with different things.
You do not need any knowledge of how the system works to use the premade elements on this page, simply copy-paste them into your toolbar as directed and you are good to go.
Changes you make to your [[Special:MyPage/common.js|common.js]] page only take effect after you save the page, so to check that the changes you have made worked you should save your [[Special:MyPage/common.js|common.js]] page and try to edit some other wiki page. If you see the default toolbar when you edit a page that means that your edits "broke" your toolbar. Consult the [[#General Guidelines|#general guidelines]] for help debugging your code.
If the changes you made are not working, or if you would like assistance creating your own toolbar you can DM <code>kingofherdaz</code> on Discord for help.
== Basic ==
Before you can customize your toolbar you need to have the "Enable the editing toolbar" option in your [[Special:Preferences#mw-prefsection-editing|preferences]] enabled. Once you have done this you are ready to begin.
First, add the following to your
<pre>
== Premade Elements ==
All of the pieces of code in this section have been tested extensively and are ready to be used as presented here. If you want to add one of these items simply copy-paste the code for that item into your
To learn how the syntax works and how you can modify and create your own code for your toolbar see [[#Customization]].
=== Premade Buttons ===
Buttons are the simplest type of element in the toolbar. Buttons appear in the toolbar as icons
The buttons presented here will be added to the left side of the <code>main</code> section of your toolbar (which is the top row that is always showing).
==== Art Infobox ====
group: 'insert',
tools: {
label: 'Art infobox',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/
action: {
type: 'encapsulate',
|}
====
This button encapsulates the highlighted text or your cursor between <code><nowiki>| <small><center>by {{a|</nowiki></code> and <code><nowiki>}}</center></small></nowiki></code>. This makes it easier to add artist attributions to images in galleries. After you paste the filename on a new line in the gallery simply click this button and type the name of the artist.
{| class="mw-collapsible mw-collapsed" width=100%
|
<pre>
// Adding
$('#wpTextbox1').wikiEditor('addToToolbar', {
section: 'main',
group: 'insert',
tools: {
label: '
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/
action: {
type: 'encapsulate',
options: {
pre:
post:
}
}
|}
====
This button inserts the {{t|artist}} infobox (with all possible parameters) into the page followed by the rest of the things that should go on an artist page with the proper formatting and spacing.
{| class="mw-collapsible mw-collapsed" width=100%
|
<pre>
//
$('#wpTextbox1').wikiEditor('addToToolbar', {
section: 'main',
group: 'insert',
tools: {
label: '
type: 'button',
action: {
type: 'encapsulate',
options: {
pre: '{'+'{artist' + '\n' + '|image=' + '\n' + '|alias=' + '\n' + '|fb=' + '\n' + '|reddit=' + '\n' + '|behance=' + '\n' + '|da=' + '\n' + '|ig=' + '\n' + '|as=' + '\n' + '|tumblr=' + '\n' + '|twitter=' + '\n' + '|site=' + '\n' + '|license=all|some|none|official' + '\n' + '|contact=' + '\n' + '|type=fan|interior|cover|multimedia' + '\n' + '|no-notify=y' + '\n' + '}}' + '\n\n' + '<' + 'br style="clear:right;"/>' + '\n' + '== Gallery ==' + '\n' + '<' + 'gallery caption="Gallery" mode="packed" heights=200px>' + '\n\n' + '<' + '/gallery>' + '\n' + '{' + '{meta/done}}'
}
}
group: 'insert',
tools: {
label: 'Break tag',
type: 'button',
|}
====
{| class="mw-collapsible mw-collapsed" width=100%
|
<pre>
// Adding
$('#wpTextbox1'
section: 'main',
group: 'insert',
tools: {
}
}
}
|}
====
Encases
{| class="mw-collapsible mw-collapsed" width=100%
|
<pre>
// Adding
$('#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'main',
group: 'insert',
tools: {
label: '
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/
action: {
type: 'encapsulate',
options: {
pre:
post:
}
}
group: 'insert',
tools: {
label: 'Columns',
type: 'button',
|}
====
Encases
{| class="mw-collapsible mw-collapsed" width=100%
|
<pre>
// Adding
$('#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'main',
group: 'insert',
tools: {
label: '
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/
action: {
type: 'encapsulate',
options: {
pre:
post:
}
}
}
}
});
</pre>
|}
==== Image template ====
Pastes the {{t|image}} template onto the page, encapsulating your cursor or whatever you have highlighted.
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>
// Adding image template button to the "main" section
$('#wpTextbox1').wikiEditor('addToToolbar', {
section: 'main',
group: 'insert',
tools: {
image: {
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}}'
}
}
}
}
});
</pre>
|}
==== Simple Link ====
Simply encases the highlighted text within <code><nowiki>[[</nowiki></code> and <code><nowiki>]]</nowiki></code> to generate a normal link.
{| class="mw-collapsible mw-collapsed" width=100%
|-
|
|-
|
<pre>
// Adding link button to the "main" section
$('#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'main',
group: 'insert',
tools: {
link: {
label: 'Link',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/9/97/Button_int_link.png',
action: {
type: 'encapsulate',
options: {
pre: "[[",
post: "]]"
}
}
}
}
});
</pre>
|}
==== Wikipedia Link ====
Pastes <code><nowiki>[[Wikipedia:</nowiki></code> and <code><nowiki>|]]</nowiki></code> around your highlighted text. This generates a link to that Wikipedia page and hides the prefix. For example, if you highlight <code>Brandon Sanderson</code> and click this button it will generate this: <code><nowiki>[[Wikipedia:Brandon Sanderson|]]</nowiki></code> which produces [[Wikipedia:Brandon Sanderson|Brandon Sanderson]] on the page.
{| class="mw-collapsible mw-collapsed" width=100%
|-
|
|-
|
<pre>
// Adding Wikipedia link button to the "main" section
$('#wpTextbox1').wikiEditor('addToToolbar', {
section: 'main',
group: 'insert',
tools: {
wikipedia: {
label: 'Wikipedia',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/c/cb/Button_wikipedia.png',
action: {
type: 'encapsulate',
options: {
pre: "[[Wikipedia:",
post: "|]]"
}
}
}
}
=== Premade Dropdowns ===
Dropdowns are lists of options that drop down (hence the name) from the toolbar when your cursor passes over its spot on the toolbar. Each option, when clicked, performs an [[#
The dropdowns presented here will be added to the <code>advanced</code> section of your toolbar on the right hand side.
|
<pre>
//Add new references dropdown to the "advanced" section
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
} );
</pre>
|}
|
<pre>
//Add new build-a-box dropdown to the "advanced" section
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
} );
</pre>
|}
|
<pre>
//Add new infobox endings dropdown to the "advanced" section
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
}
action:
type: 'encapsulate',
pre: '\n' + '|world=',
post: '\n' + '|universe=[[Cytoverse]]' + '\n' + '|books=[[Skyward (series)]]' + '\n' + '}}'
}
}
}
}
}
}
}
}
} );
</pre>
|}
|
<pre>
//Add new page ends dropdown to the "advanced" section
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
label: '{' + '{Firstborn}}',
action:
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Firstborn}}'
}
} },
'whitesand': {
label: '{' + '{White Sand}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{White Sand}}'
}
}
}
}
}
}
}
}
} );
</pre>
|}
//These next two reference templates are very long so they are done differently
{
options: {
pre: '{' + '{url ref|url=',
}
},
},
{
options: {
pre: '{' + '{17s ref|topic/news/post',
== Customization==
In this section we will present a guide to creating your own buttons, booklets and dropdowns for your toolbar. While there are other options and ways to do these things, for the sake of clarity and simplicity here we have limited this guide to the things that are the most useful and easiest to understand. For a more complete (though less clear) guide to the toolbar see [https://www.mediawiki.org/wiki/Extension:WikiEditor/Toolbar_customization Mediawiki's full guide].
If the changes you made are not working and you would like assistance you can DM <code>King of Herdaz#2300</code> on Discord for help.
=== General Guidelines ===
* If you are having trouble, look at the example elements presented above and use them as a guide. Or simply copy one of the sample elements and modify it following the steps presented in this guide.
* To add a one line comment put <code>//</code> at the beginning of a line followed by the text of the comment. Whatever you write after a <code>//</code> on that line will not affect your code.
* For multi line comments put your comments between <code>/*</code> and <code>*/</code>.
* Code for your toolbar must have the exact correct number of curly brackets (<code>{</code>), square brackets (<code>[</code>), apostrophes (<code>'</code>), parentheses (<code>(</code>), and commas (<code>,</code>) to work. If your toolbar breaks after you changed something check to see if you missed or added an extra one of these.
* While not strictly necessary, it is a good idea to split code in your toolbar over multiple lines and with whitespace differentiating each "level" of the toolbar in a manner similar to how it is done in the examples on this page. This will help you keep track of the different parts of your code and will help you keep track of the number of open and closed curly brackets in your code.
==== Strings ====
A string is a piece of text within the toolbar that is encased between two apostrophes {<code>'</code>). Strings are used in labels and actions. They should follow the following guidelines
*
* When writing out templates, whether for a label or an action, you must insert <code>' + '</code> between the first two curly brackets. For example, instead of writing <code><nowiki>{{Stormlight}}</nowiki></code> you should write <code><nowiki>{' + '{Stormlight}}</nowiki></code>. This prevents the template from applying categories to your [[Special:MyPage/common.js|common.js]] page and also prevents it from being listed on the relevant template's list of pages that use it.
* For the same reason you must also do this when writing category tags. For example, instead of writing <code><nowiki>[[Category: Stormlight]]</nowiki></code> you should write <code><nowiki>[' + '[Category: Stormlight]]</nowiki></code>.
* When writing code for substitutions this is even more important, since if you do not do it then the substitution will be performed when you save your
====
Many things in the toolbar must be given internal names. Internal names help the program differentiate between different parts of the toolbar. What you use as an internal name will not affect the toolbar so you can use any string of characters.
Internal names must not contain any spaces. If you want an internal name to be more than one word you can use a dash (<code>-</code>) instead of a space. You should not reuse internal names within your entire toolbar. If you use the same internal name
A label is the name of an element that will be displayed on the toolbar. For dropdowns these are displayed in the dropdown itself, while with buttons the label is shown when you hover your cursor over the icon for the button. Unlike internal names
{{anchor|action}}{{anchor|actions}}
==== Actions ====
While there are other types of actions that you can do, in this guide we focus on the <code>encapsulate</code> action as it is the easiest to understand and use. This action pastes one
The code for this action is as follows, and this format is the same for dropdowns, booklets and buttons.
<code>XXXX</code> is replaced by the string that goes before the highlighted text/cursor, and <code>YYYY</code> is replaced by the string that goes after the highlighted text/cursor.
* To have an action include a line break insert <code>\n</code> into the
* To have an action include an apostrophe (<code>'</code>) within the string that it inserts, place <code>\'</code> into your code at the place you want the apostrophe to go. If you do not include the backslash (<code>\</code>) and type additional apostrophes in your code it will cause the toolbar to break. You must put an additional backslash with each additional apostrophe you add to a string.
=== Creating Your Own Buttons ===
To create your own button paste the code at the end of this section into your
* Replace <code>AAAA</code> with the name of the section you would like to put the button. Unless you are adding new [[#
* Replace <code>BBBB</code> with the name of the part of that section where you would like your button to go. If it will be in the <code>main</code> section this should be <code>format</code> (though <code>insert</code> can also work). If it will be in the <code>advanced</code> section then this can be either <code>heading</code>, <code>format</code> (this will work best and is recommended), <code>size</code>, or <code>insert</code>.
* Replace <code>CCCC</code> with what the internal name for this button.
* Replace <code>DDDD</code> with the label for this button. The text you put here will be shown when you hover your cursor over this button's icon on your toolbar.
* Replace <code>EEEE</code> with a link to the file that you would like to use as the icon for your button. This needs to be a full link starting after <code>https:</code>. For example, you can use <code>//upload.wikimedia.org/wikipedia/commons/2/23/Button_code.png</code>. While you can use any file as your icon it is recommended that you use one of the icons listed on Mediawiki's [https://www.mediawiki.org/wiki/Extension:WikiEditor/Toolbar_icons list of toolbar icons] since they are all of a size and shape that works.
* Replace <code>FFFF</code> and <code>GGGG</code> as you would with any other [[#
<pre>
group: 'BBBB',
tools: {
label: 'DDDD',
type: 'button',
=== Creating Your Own Dropdowns ===
To start add this code into your
* If you have created a new [[#
* Replace <code>BBBB</code> with the internal name for the dropdown.
* Replace <code>CCCC</code> with the label for the dropdown that will be displayed on the page.
* Replace <code>WWWW</code> with the internal name for the item.
* Replace <code>XXXX</code> with the label for the item. This is how it will appear on the list.
* Replace <code>YYYY</code> and <code>ZZZZ</code> as you would with any other [[#
<pre>
type: 'select',
list: {
label: 'XXXX',
action: {
<pre>
},
label: 'XXXX',
action: {
}
}
</pre>
{{anchor|section}}{{anchor|sections}}
=== Adding New Sections ===
There are two types of <code>section</code>s in the toolbar, <code>toolbar</code> sections and <code>booklet</code> sections. Booklet sections contain pages of characters and will be explained below. Toolbar sections contain dropdowns and <code>group</code>s of buttons.
The code adding a new section to your toolbar must be placed before the code for all items that will go within it.
To add a new section to your toolbar insert the following code into your [[Special:MyPage/common.js|common.js]] page between the two [[#Basic]] sections and change the following things:
* Replace <code>AAAA</code> with the internal name for the section that will used to assign buttons and dropdowns to it.
* Replace <code>BBBB</code> with the label for the section.
<pre>
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
sections: {
'AAAA': {
type: 'toolbar',
label: 'BBBB'
}
}
} );
</pre>
To add a new group to a section (whether a section you added or to a default section) within your toolbar insert the following code into your [[Special:MyPage/common.js|common.js]] page, between the code that added the section and the code for the buttons that will go within it, and make the following changes:
* Replace <code>CCCC</code> with the internal name of the section that will contain this group.
* Replace <code>DDDD</code> with the internal name for the group.
* Replace <code>EEEE</code> with the label for the group.
<pre>
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section:: 'CCCC',
'groups': {
'DDDD': {
label: 'EEEE'
}
}
} );
</pre>
Here we will tell you how to create booklets that contain pages of characters. For other things you can do with booklets see [https://www.mediawiki.org/wiki/Extension:WikiEditor/Toolbar_customization Mediawiki's guide].
A key difference between dropdowns and booklets is that while with dropdowns every option must be an action, with booklets that is not the case. Booklets contain <code>pages</code> of <code>characters</code> that when clicked paste text into the page. Characters can be either simple
To create a new booklet section add the following code to your
* Replace <code>AAAA</code> with the internal name for the section.
* Replace <code>BBBB</code> with the label for the section.
//Optional description
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
'AAAA': {
</pre>
<pre>
//Optional description
</pre>
</pre>
Alternatively, you can add characters as [[#
To add a character as an action paste the following code into the page (in the space indicated above) and change the following things:
* Replace <code>XXXX</code> and <code>YYYY</code> as you would with any other [[#
* Replace <code>ZZZZ</code> with the label for this item that will be displayed in its booklet page.
<pre>
{
}
},
},
</pre>
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 [https://phabricator.wikimedia.org/diffusion/EWED/browse/master/modules/jquery.wikiEditor.toolbar.config.js the code for the default version].
Fortunately, the names of many of the elements are known. Here are premade snippets of code for many of the elements in the default toolbar. Paste any one of them into your
==== <nowiki><ref></nowiki> Button ====
//Remove the default <ref> button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
});</pre>
|}
//remove the bulleted list button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
});</pre>
|}
//remove the numbered list button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
});</pre>
|}
//remove the default <br> button (to replace it with a <br/> button which is preferred on the Coppermind)
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
});</pre>
|}
//remove table button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
});</pre>
|}
//remove File button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
});</pre>
|}
//remove original link button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
});</pre>
|}
<pre>
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
});</pre>
|}
| |||