Difference between revisions of "User:King of Herdaz/Toolbar customization"

Jump to navigation Jump to search
m (hmm, it would probably be a good idea to use semicolons for those headers instead of making them into actual subsections. The TOC is getting very long and wide)
(→‎Buttons: started the guide to creating custom buttons)
pre: '<' + 'code>',
post: '</' + 'code>'
}
}
}
}
});
</pre>
|}
 
=== Creating Your Own Buttons ===
While there are other types of actions that you can do with buttons, here we will focus on the <code>encapsulate</code> action as it is the easiest to understand and use.
 
To create your own button paste the code at the end of this section into your <code>/common.js</code> page between the two [[#Basic]] sections and change the following things:
 
*
* Replace <code>AAAA</code> with the name of the section you would like to put the button.
* Replace <code>BBBB</code> with the name of the part of that section where you would like your button to go.
* Replace <code>DDDD</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.
*
 
{| class="mw-collapsible mw-collapsed" width=100%
|-
|
|-
|
<pre>
// Optional Description
$('#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'AAAA',
group: 'BBBB',
tools: {
"comment": {
label: 'CCCC',
type: 'button',
icon: 'DDDD',
action: {
type: 'encapsulate',
options: {
pre: 'EEEE',
post: 'FFFF'
}
}