Usuario:King of Herdaz/Toolbar customization
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 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 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 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 for help debugging your code.
Basic
Before you can customize your toolbar you need to have the "Enable the editing toolbar" option in your preferences enabled. Once you have done this you are ready to begin.
First, 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 must place all modifications to the toolbar that you make between these two sections.
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 common.js page between the two #Basic sections to add it to your toolbar.
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 and execute one #action when they are clicked. Examples of buttons in the default toolbar configuration include the Bold button and the Italics button.
The buttons presented here will be added to the left side of the main section of your toolbar (which is the top row that is always showing).
Art Infobox
This button pastes the {{art}} infobox into the page leaving your cursor after |#artist=. This can make file uploads an easier process since you no longer have to copy and paste the infobox every time you upload a file.
// Adding an art infobox button to the "main" section
$('#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'main',
group: 'insert',
tools: {
"code": {
label: 'Art infobox',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/5/5a/Vector_toolbar_insert_picture_gallery_button.png',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{art' + '\n' + '|#artist=' + '\n' + '|series=' + '\n' + '|#source=',
post: '\n' + '|type=' + '\n' + '}}'
}
}
}
}
});
|
Artist Attribution
This button encapsulates the highlighted text or your cursor between | <small><center>by {{a| and }}</center></small>. 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.
// Adding artist attribution button for galleries to the "main" section
$('#wpTextbox1').wikiEditor('addToToolbar', {
section: 'main',
group: 'insert',
tools: {
"artist-attribution": {
label: 'Artist Attribution',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/1/1b/Button_miss_signature.png',
action: {
type: 'encapsulate',
options: {
pre: '| <small><center>by {{a|',
post: '}}</center></small>'
}
}
}
}
});
|
Artist Page
This button inserts the {{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.
// Adding artist page button to the "main" section
$('#wpTextbox1').wikiEditor('addToToolbar', {
section: 'main',
group: 'insert',
tools: {
"artist-page": {
label: 'Artist Page',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/7/76/Button_atelier_graphique.PNG',
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}}'
}
}
}
}
});
|
Break Tag
Inserts <br /> into the page which is the preferred syntax on the Coppermind for creating line breaks.
// Adding <br/> button to the "main" section
$('#wpTextbox1').wikiEditor('addToToolbar', {
section: 'main',
group: 'insert',
tools: {
"break": {
label: 'Break tag',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/1/13/Button_enter.png',
action: {
type: 'encapsulate',
options: {
pre: '<' + 'br />',
}
}
}
}
});
|
Category
Pastes [[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: "]]"
}
}
}
}
});
|
<code>
Encases your highlighted text between <code> and </code>.
// Adding a <code> button to the "main" section
$('#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'main',
group: 'insert',
tools: {
"code": {
label: 'Code',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/2/23/Button_code.png',
action: {
type: 'encapsulate',
options: {
pre: '<' + 'code>',
post: '</' + 'code>'
}
}
}
}
});
|
Columns
Encases your text, which should a bulleted (*) or numbered (#) list, inside of the {{columns}} template to columnize the list.
// Adding columns button to the "main" section
$('#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'main',
group: 'insert',
tools: {
"columns": {
label: 'Columns',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/2/25/Vector_toolbar_bulleted_list_button.png',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{columns|' + '\n',
post: '\n' + '}}'
}
}
}
}
});
|
Hidden Text
Encases the highlighted text between <!-- and --> to prevent it from appearing in the viewable page.
// Adding hidden text button to the "main" section
$('#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'main',
group: 'insert',
tools: {
"hidden": {
label: 'Hidden text',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/1/1b/Button_hide_wiki_tag.png',
action: {
type: 'encapsulate',
options: {
pre: "<!--",
post: "-->"
}
}
}
}
});
|
Image template
Pastes the {{image}} template onto 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: {
"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}}'
}
}
}
}
});
|
Simple Link
Simply encases the highlighted text within [[ and ]] to generate a normal link.
// 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: "]]"
}
}
}
}
});
|
Wikipedia Link
Pastes [[Wikipedia: and |]] around your highlighted text. This generates a link to that Wikipedia page and hides the prefix. For example, if you highlight Brandon Sanderson and click this button it will generate this: [[Wikipedia:Brandon Sanderson|]] which produces Brandon Sanderson on the page.
// 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 #action the same way buttons do. The list of headings on the left side of the default toolbar is an example of a dropdown.
The dropdowns presented here will be added to the advanced section of your toolbar on the right hand side.
Reference Templates
This dropdown contains a list of commonly used reference templates. When you click one of the options in this dropdown the selected reference template will be pasted into the page, encapsulating your cursor or whatever text you have highlighted.
//Add new references dropdown to the "advanced" section
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'advanced',
groups: {
list: {
tools: {
references: {
label: 'references',
type: 'select',
list: {
'book-ref': {
label: '{' + '{book ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{book ref|',
post: '}}'
}
}
},
'wob-ref': {
label: '{' + '{wob ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{wob ref|',
post: '}}'
}
}
},
'ref-plaintext': {
label: '{' + '{ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{ref|text=',
post: '}}'
}
}
},
'epigraph-ref': {
label: '{' + '{epigraph ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{epigraph ref|',
post: '}}'
}
}
},
'au-ref': {
label: '{' + '{au ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{au ref|',
post: '}}'
}
}
},
'msh-ref': {
label: '{' + '{msh ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{msh ref|',
post: '}}'
}
}
},
'tes-ref': {
label: '{' + '{tes ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{tes ref|',
post: '}}'
}
}
},
'file-ref': {
label: '{' + '{file ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{file ref|',
post: '}}'
}
}
},
'map-ref': {
label: '{' + '{map ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{map ref|',
post: '}}'
}
}
},
'url-ref': {
label: '{' + '{url ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{url ref|url=',
post: '|text=|date=|site=}}'
}
}
},
'17s-ref': {
label: '{' + '{17s ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{17s ref|topic/news/post',
post: '|id#|description|date=}}'
}
}
}
}
}
}
}
}
} );
|
Build-a-Box
This dropdown helps you quickly and easily create {{character}} infoboxes. This dropdown, combined with next two dropdowns on this list, is very useful for creating new pages.
It contains {{character followed by a list of parameters commonly used in character infoboxes. Each parameter you click will be inserted on a new line.
//Add new build-a-box dropdown to the "advanced" section
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'advanced',
groups: {
list: {
tools: {
simplecharacterinfobox: {
label: 'build-a-box',
type: 'select',
list: {
'start': {
label: '{' + '{character',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{character'
}
}
},
'residence': {
label: '|residence=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|residence='
}
}
},
'imageparam': {
label: '|image=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|image='
}
}
},
'profession': {
label: '|profession=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|profession='
}
}
},
'#profession': {
label: '|#profession=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|#profession='
}
}
},
'skills': {
label: '|skills=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|skills='
}
}
},
'species': {
label: '|species=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|species='
}
}
},
'abilities': {
label: '|abilities=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|abilities='
}
}
},
'ethnicity': {
label: '|ethnicity=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|ethnicity='
}
}
},
'born': {
label: '|born=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|born='
}
}
},
'died': {
label: '|died=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|died='
}
}
},
'nationality': {
label: '|nationality=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|nationality='
}
}
},
'bonded': {
label: '|bonded=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|bonded='
}
}
}
}
}
}
}
}
} );
|
Infobox Endings
This dropdown contains a list of buttons that insert the last three lines of an infobox for you. There is one button for each series/world. This goes hand in hand with the previous dropdown on this list as once you are finished with that step you simply click the relevant option from this dropdown and then you are done with the infobox.
With the exception of the Skyward option, all of the options in this dropdown paste the world=, universe=, and books= parameters onto the page on separate lines and fill them with the relevant information followed by }}. With the Skyward option, due to the fact that the Skyward series takes place on multiple worlds, the world= parameter is left empty and your cursor is placed after that parameter so you can fill it with the relevant world's name.
//Add new infobox endings dropdown to the "advanced" section
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'advanced',
groups: {
list: {
tools: {
endings: {
label: 'ends',
type: 'select',
list: {
'sa': {
label: 'Stormlight',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|world=Roshar' + '\n' + '|universe=[[Cosmere]]' + '\n' + '|books=[[The Stormlight Archive]]' + '\n' + '}}'
}
}
},
'mbe1': {
label: 'MB Era 1',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|world=Scadrial' + '\n' + '|universe=[[Cosmere]]' + '\n' + '|books=[[Mistborn Era 1]]' + '\n' + '}}'
}
}
},
'mbe2': {
label: 'MB Era 2',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|world=Scadrial' + '\n' + '|universe=[[Cosmere]]' + '\n' + '|books=[[Mistborn Era 2]]' + '\n' + '}}'
}
}
},
'wb': {
label: 'Warbreaker',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|world=Nalthis' + '\n' + '|universe=[[Cosmere]]' + '\n' + '|books=[[Warbreaker]]' + '\n' + '}}'
}
}
},
'ela': {
label: 'Elantris',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|world=Sel' + '\n' + '|universe=[[Cosmere]]' + '\n' + '|books=[[Elantris (book)|Elantris]]' + '\n' + '}}'
}
}
},
'alc': {
label: 'Alcatraz',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|earth=Alcatraz' + '\n' + '|books=[[Alcatraz Versus the Evil Librarians (series)|Alcatraz Versus the Evil Librarians]]' + '\n' + '}}'
}
}
},
'ws': {
label: 'White Sand',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|world=Taldain' + '\n' + '|universe=[[Cosmere]]' + '\n' + '|books=[[White Sand]]' + '\n' + '}}'
}
}
},
'skyward': {
label: 'Skyward',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|world=',
post: '\n' + '|universe=[[Cytoverse]]' + '\n' + '|books=[[Skyward (series)]]' + '\n' + '}}'
}
}
}
}
}
}
}
}
} );
|
Page Endings
This dropdown follows the previous two on this list and makes the rest of page creation quick and easy. After selecting the relevant option from the Infobox Ends dropdown simply click the first three items in this dropdown followed by the relevant article status template and navbar template. Everything is inserted with the proper spacing and all that is left for you to do is to write the text of the article.
//Add new page ends dropdown to the "advanced" section
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'advanced',
groups: {
list: {
tools: {
bottoms: {
label: 'bottoms',
type: 'select',
list: {
'pagename': {
label: '{' + '{SUBST:PAGENAME}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '\'\'\'{' + '{SUBST:PAGENAME}}\'\'\''
}
}
},
'notes': {
label: '== Notes ==',
action: {
type: 'encapsulate',
options: {
pre: '\n\n' + '== Notes =='
}
}
},
'refsection': {
label: '<' + 'references/>',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '<' + 'references />'
}
}
},
'stub': {
label: '{' + '{stub}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{stub}}'
}
}
},
'partial': {
label: '{' + '{partial}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{partial}}'
}
}
},
'complete': {
label: '{' + '{complete}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{complete}}'
}
}
},
'alcatraz': {
label: '{' + '{Alcatraz}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Alcatraz}}'
}
}
},
'elantris': {
label: '{' + '{Elantris}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Elantris}}'
}
}
},
'mbera1': {
label: '{' + '{Mistborn|Era 1}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Mistborn|Era 1}}'
}
}
},
'mbera2': {
label: '{' + '{Mistborn|Era 2}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Mistborn|Era 2}}'
}
}
},
'reckoners': {
label: '{' + '{Reckoners}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Reckoners}}'
}
}
},
'sky': {
label: '{' + '{Skyward}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Skyward}}'
}
}
},
'stormlight': {
label: '{' + '{Stormlight}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Stormlight}}'
}
}
},
'warbreaker': {
label: '{' + '{Warbreaker}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Warbreaker}}'
}
}
},
'whitesand': {
label: '{' + '{White Sand}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{White Sand}}'
}
}
}
}
}
}
}
}
} );
|
Premade Booklets
A booklet is a type of section within the editing toolbar. Unlike a toolbar section which can contain buttons and dropdowns, booklet sections instead contain pages. The Special characters and Help sections of the default toolbar are examples of booklets.
Booklets and dropdowns perform similar functions and which of the two you choose to use is mainly a matter of personal preference.
This premade booklet section contains four pages, each of which corresponds to one of the sample dropdowns in the previous section:
//add new section to editing toolbar
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
'sections': {
'useful-stuff': {
'type': 'booklet',
'label': 'Useful Stuff',
'pages': {
//Page of commonly used reference templates
'section-refs': {
'label': 'References',
'layout': 'characters',
'characters': [
'{' + '{book ref|}}',
'{' + '{wob ref|}}',
'{' + '{ref|text=}}',
'{' + '{epigraph ref|}}',
'{' + '{au ref|}}',
'{' + '{msh ref|}}',
'{' + '{tes ref|}}',
'{' + '{file ref|}}',
'{' + '{map ref|}}',
//These next two reference templates are very long so they are done differently
{
'action': {
'type': 'encapsulate',
options: {
pre: '{' + '{url ref|url=',
post: '|text=|date=|site=}}'
}
},
'label': '{' + '{url ref}}'
},
{
'action': {
'type': 'encapsulate',
options: {
pre: '{' + '{17s ref|topic/news/post',
post: '|id#|description|date=}}'
}
},
'label': '{' + '{17s ref}}'
},
]
},
//Page to quickly build character infoboxes
'section-Build-a-Box': {
'label': 'Build-a-Box',
'layout': 'characters',
'characters': [
'{' + '{character',
'\n' + '|image=',
'\n' + '|residence=',
'\n' + '|profession=',
'\n' + '|#profession=',
'\n' + '|species=',
'\n' + '|abilities=',
'\n' + '|ethnicity=',
'\n' + '|born=',
'\n' + '|died=',
'\n' + '|nationality=',
'\n' + '|residence=',
]
},
//Page of infobox endings
'section-end': {
'label': 'Endings',
'layout': 'characters',
'characters': [
'\n' + '|world=Scadrial',
'\n' + '|world=Roshar',
'\n' + '|world=Nalthis',
'\n' + '|world=Taldain',
'\n' + '|earth=Alcatraz',
'\n' + '|universe=[[Cosmere]]',
'\n' + '|books=[[Mistborn Era 1]]',
'\n' + '|books=[[Mistborn Era 2]]',
'\n' + '|books=[[The Stormlight Archive]]',
'\n' + '|books=[[Warbreaker]]',
//Alcatraz is very long so it has to be done differently
{
'action': {
'type': 'encapsulate',
'options': {
'pre': '\n' + '|books=[[Alcatraz Versus the Evil Librarians (series)|Alcatraz Versus the Evil Librarians]]'
}
},
'label': '|books=Alcatraz'
},
]
},
//Page of stuff to finish a page after making the infobox
'section-bottom': {
'label': 'Bottom of Page',
'layout': 'characters',
'characters': [
'\n' + '\'\'\'{' + '{SUBST:PAGENAME}}\'\'\'',
'\n\n' + '== Notes ==',
'\n' + '<' + 'references/>',
'\n' + '{' + '{stub}}',
'\n' + '{' + '{partial}}',
'\n' + '{' + '{complete}}',
'\n' + '{' + '{Alcatraz}}',
'\n' + '{' + '{Elantris}}',
'\n' + '{' + '{Mistborn|Era 1}}',
'\n' + '{' + '{Mistborn|Era 2}}',
'\n' + '{' + '{Reckoners}}',
'\n' + '{' + '{Skyward}}',
'\n' + '{' + '{Stormlight}}',
'\n' + '{' + '{Warbreaker}}',
'\n' + '{' + '{White Sand}}',
]
}
}
}
}
});
|
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 Mediawiki's full guide.
If the changes you made are not working and you would like assistance you can DM King of Herdaz#2300 on Discord.
General Guidelines
Here are some rules and tips for writing code on for your toolbar:
- 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 comment put
//at the beginning of a line followed by the text of the comment. Whatever you write after a//will not affect your code. - Code for your toolbar must have the exact correct number of curly brackets (
{), square brackets ([), apostrophes ('), and commas (,) to work. If your toolbar breaks after you changed something check to see if 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. Strings used in labels and actions follow the following guidelines:
- Inserting
' + 'between two parts of a string can have effects on your common.js page (as will be discussed below), but will not appear on a page when the action is called. For example, both<br />and<' + 'br />will produce the same result (<br />) on the page when they are called. - When writing out templates, whether for a label or an action, you must insert
' + 'between the first two curly brackets. For example, instead of writing{{Stormlight}}you should write{' + '{Stormlight}}. This prevents the template from applying categories to your 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
[[Category: Stormlight]]you should write[' + '[Category: Stormlight]]. - 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 common.js page. For example, instead of writing
{{SUBST:PAGENAME}}you should write{' + '{SUBST:PAGENAME}}.
Definitions
- Internal Names
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 (-) instead of a space. You should not reuse internal names within your entire toolbar. If you use the same internal name multiple times then either strange things will happen or the toolbar will simply break.
- Labels
A label is the name of an element that will be displayed on the toolbar. Unlike internal names these can be reused.
Actions
While there are other types of actions that you can do, in this guide we focus on the encapsulate action as it is the easiest to understand and use. This action pastes one snippet of text before the highlighted text (or you cursor) and a second snippet after the highlighted text. The second snippet (post:) can be deleted if you only want to insert one string of text.
The code for this action is as follows, and this format is the same for dropdowns, booklets and buttons.
action: {
type: 'encapsulate',
options: {
pre: 'XXXX',
post: 'YYYY'
XXXX is replaced by the string that goes before the highlighted text/cursor, and YYYY is replaced by the string that goes after the highlighted text/cursor.
- To have an action include a line break insert
\ninto the snippet at the place you want it to be. For stylistic reasons some people will put' + 'between instances of\nand other text in their snippets, but this does not have any effect on the output of the action and can be omitted if you want. - To have an action include an apostrophe (
') within the string that it inserts, place\'into your code at the place you want the apostrophe to go. If you do not include the backslash (\) and type additional apostrophes in your code it will cause the toolbar to break.
Creating Your Own Buttons
To create your own button paste the code at the end of this section into your common.js page between the two #Basic sections and change the following things:
- Replace
AAAAwith the name of the section you would like to put the button. Unless you are adding new #sections to the toolbar this should be eithermainoradvanced. - Replace
BBBBwith the name of the part of that section where you would like your button to go. If it will be in themainsection this should beformat(thoughinsertcan also work). If it will be in theadvancedsection then this can be eitherheading,format(this will work best and is recommended),size, orinsert. - Replace
CCCCwith what the internal name for this button. - Replace
DDDDwith 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
EEEEwith 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 afterhttps:. For example, you can use//upload.wikimedia.org/wikipedia/commons/2/23/Button_code.png. While you can use any file as your icon it is recommended that you use one of the icons listed on Mediawiki's list of toolbar icons since they are all of a size and shape that works. - Replace
FFFFandGGGGas you would with any other #action.
// Optional Description
$('#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'AAAA',
group: 'BBBB',
tools: {
"CCCC": {
label: 'DDDD',
type: 'button',
icon: 'EEEE',
action: {
type: 'encapsulate',
options: {
pre: 'FFFF',
post: 'GGGG'
}
}
}
}
});
Creating Your Own Dropdowns
To start add this code into your common.js page between the two #Basic sections and change the following things:
- If you have created a new #section in your toolbar and want to put your dropdown to go there then change
AAAAto the name of your section, otherwise replace it withadvanced. - Replace
BBBBwith the internal name for the dropdown. - Replace
CCCCwith the label for the dropdown that will be displayed on the page.
Repeat the following steps for each item you add to your dropdown:
- Replace
WWWWwith the internal name for the item. - Replace
XXXXwith the label for the item. This is how it will appear on the list. - Replace
YYYYandZZZZas you would with any other #action.
//Optional description
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'AAAA',
groups: {
list: {
tools: {
BBBB: {
label: 'CCCC',
type: 'select',
list: {
'WWWW': {
label: 'XXXX',
action: {
type: 'encapsulate',
options: {
pre: 'YYYY',
post: 'ZZZZ'
}
}
Insert your additional items here
} } } } } } } );
For each item you want to add to the dropdown add the following code into the space indicated above and change the WWWW, XXXX, YYYY, and ZZZZ as you did for the first action in the list.
},
'WWWW': {
label: 'XXXX',
action: {
type: 'encapsulate',
options: {
pre: 'YYYY',
post: 'ZZZZ'
}
}
Adding New Sections
There are two types of sections in the toolbar, toolbar sections and booklet sections. Booklet sections contain pages of characters and will be explained below. Toolbar sections contain dropdowns and groups 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 common.js page between the two #Basic sections and change the following things:
- Replace
AAAAwith the internal name for the section that will used to assign buttons and dropdowns to it. - Replace
BBBBwith the label for the section.
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
'sections': {
'AAAA': {
'type': 'toolbar',
'label': 'BBBB'
}
}
} );
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 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
CCCCwith the internal name of the section that will contain this group. - Replace
DDDDwith the internal name for the group. - Replace
EEEEwith the label for the group.
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
'section': 'CCCC',
'groups': {
'DDDD': {
'label': 'EEEE'
}
}
} );
Creating Your Own Booklets
Here we will tell you how to create booklets that contain pages of characters. For other things you can do with booklets see 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 pages of characters that when clicked paste text into the page. Characters can be either simple snippets of code or #actions. This can make it easier to add items to booklets than to dropdowns, though booklets do have their complexities.
To create a new booklet section add the following code to your common.js page between the two #Basic sections and change the following things:
- Replace
AAAAwith the internal name for the section. - Replace
BBBBwith the label for the section.
//Optional description
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
'sections': {
'AAAA': {
'type': 'booklet',
'label': 'BBBB',
'pages': {
Followed by this:
}
}
}
});
Pages you create for this booklet section will go between these two sections of code.
Pages
To create a new page for a booklet insert the following code in between the two pieces of code at the beginning of this section and make the following changes:
- Replace
CCCCwith the internal name for this page. - Replace
DDDDwith the label for this page.
//Optional description
'section-CCCC': {
'label': 'DDDD',
'layout': 'characters',
'characters': [
Characters you add to this page will go here.
]
},
Characters
For each character you add to a page paste the following code into the page (in the space indicated above) and replace EEEE with the text you want pasted into the page when this character is clicked. When you add characters this way the name displayed will simply be the text that you put in place of EEEE.
'EEEE',
Alternatively, you can add characters as #actions. This is helpful if the text you want inserted when this option is selected is very long and will take up a lot of space in the booklet page, or when you want this character to encapsulate text.
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
XXXXandYYYYas you would with any other #action. - Replace
ZZZZwith the label for this item that will be displayed in its booklet page.
{
'action': {
'type': 'encapsulate',
'options': {
'pre': 'XXXX',
'post': 'YYYY'
}
},
'label': 'ZZZZ'
},
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 snippets 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.
<ref> Button
//Remove the default <ref> button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'main',
'group': 'insert',
'tool': 'reference'
});
|
Bulleted List Button
//remove the bulleted list button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'advanced',
'group': 'format',
'tool': 'ulist'
});
|
Numbered List Button
//remove the numbered list button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'advanced',
'group': 'format',
'tool': 'olist'
});
|
Default Break Tag Button (<br>)
//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'
});
|
Table Button
//remove table button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'advanced',
'group': 'insert',
'tool': 'table'
});
|
[[File:]] Button
//remove File button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'main',
'group': 'insert',
'tool': 'file'
});
|
Fancy Link Button
//remove original link button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'main',
'group': 'insert',
'tool': 'link'
});
|
Others
For elements not on this list take this code and replace XXXX with the name of the section the element is in, replace YYYY with the name of the group the element is part of, and replace ZZZZ with the name of the element. You can find these names by looking through the code for the default version.
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'XXXX',
'group': 'YYYY',
'tool': 'ZZZZ'
});
|