Difference between revisions of "User:King of Herdaz/Toolbar customization"
Jump to navigation
Jump to search
|
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 is a list of premade elements that you can use as well as guides to creating and modifying your own buttons, booklets, and dropdowns.
While modifying your toolbar can seem scary, once you get the hang of it, it really isn't a big deal. Also, anything you do can be easily undone so feel free to play around and experiment with different things.
== Basic ==
|}
You will place any modifications to the toolbar that you make between these two sections.
== 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 [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 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 <code>Common.js</code> page within the two [[#Basic]] sections to remove that element.
=== <nowiki><ref></nowiki> Button ===
{| class="mw-collapsible mw-collapsed" width=100%
|-
|
|-
|
<pre>
//Remove the default <ref> button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'main',
'group': 'insert',
'tool': 'reference'
});</pre>
|}
=== Bulleted List Button ===
{| class="mw-collapsible mw-collapsed" width=100%
|-
|
|-
|
<pre>
//remove the bulleted list button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'advanced',
'group': 'format',
'tool': 'ulist'
});</pre>
|}
=== Numbered List Button ===
{| class="mw-collapsible mw-collapsed" width=100%
|-
|
|-
|
<pre>
//remove the numbered list button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'advanced',
'group': 'format',
'tool': 'olist'
});</pre>
|}
=== Default Break Tag Button (<nowiki><br></nowiki>) ===
{| class="mw-collapsible mw-collapsed" width=100%
|-
|
|-
|
<pre>
//remove the default <br> button (to replace it with a <br/> button which is preferred on the Coppermind)
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'advanced',
'group': 'format',
'tool': 'newline'
});</pre>
|}
=== Table Button ===
{| class="mw-collapsible mw-collapsed" width=100%
|-
|
|-
|
<pre>
//remove table button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'advanced',
'group': 'insert',
'tool': 'table'
});</pre>
|}
=== <nowiki>[[File:]]</nowiki> Button ===
{| class="mw-collapsible mw-collapsed" width=100%
|-
|
|-
|
<pre>
//remove File button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'main',
'group': 'insert',
'tool': 'file'
});</pre>
|}
=== Fancy Link Button ===
{| class="mw-collapsible mw-collapsed" width=100%
|-
|
|-
|
<pre>
//remove original link button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'main',
'group': 'insert',
'tool': 'link'
});</pre>
|}
=== Others ===
For elements not on this list take this code and replace <code>XXXX</code> with the name of the section the element is in, replace <code>YYYY</code> with the name of the group the element is part of, and replace <code>ZZZZ</code> with the name of the element. You you can find these names by looking through [https://phabricator.wikimedia.org/diffusion/EWED/browse/master/modules/jquery.wikiEditor.toolbar.config.js the code for the default version].
{| class="mw-collapsible mw-collapsed" width=100%
|-
|
|-
|
<pre>
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'XXXX',
'group': 'YYYY',
'tool': 'ZZZZ'
});</pre>
|}
== Buttons ==
|}
==
To add a new section to the toolbar paste the following code into your toolbar and change the following things:
* Replace <code>AAAA</code> with the internal name that you want to give the section. This will be used to identify elements that go in this section.
* Replace <code>BBBB</code> with the type of section you want to create. This can be either <code>toolbar</code> or <code>booklet</code>. Both of them will be explained below.
* Replace <code>CCCC</code> with the name of the section. This will be displayed on the toolbar as the section's name.
{| class="mw-collapsible mw-collapsed" width=100%
|-
|
<pre>
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
'sections': {
}
}
} );
</pre>
|}
== General Guidelines ==
Here are some rules and tips for writing code on your <code>common.js</code> page:
* Inserting <code>' + '</code> between two
* When writing out templates, whether as the label for an action or as part of the action itself, 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 <code>common.js</code> 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>.
| |||