Wikia

WoWWiki

Help:Edit toolbar

Talk0
100,577pages on
this wiki
HELP CONTENTS · Getting Started · New to WoWWIKI · Editing WoWWIKI · Editing WoWWIKI (advanced)
The WoWWIKI Community · Additional Help · Mists-Logo-Small Updating for Mists of Pandaria
See Wikia Help for general Wikia- and wiki- related help. See Metawiki logo 18x18 Meta-Wiki HelpIntro for basic MediaWiki usage!

In compatible browsers, an edit toolbar is automatically displayed with the edit box, provided that this has been set in the preferences. The functions are partly a typing aid, partly a reminder of required formats.

It works best with Internet Explorer, Mozilla, and Firefox.

Example of how to use it:
Editing-toolbar-example1

To make a piece of text an internal link, select it and press the third button.

In Mozilla and IE you get a select+click formatting, and if you click without a selection, it inserts sample text at the cursor. In other browsers, clicking on the button presents an explanation for each feature in an infobox.

If you do not want to display the toolbar, you can obtain some of the functionality of them using the Edit toolbar bookmarklets instead.

All of the toolbar options, and further editing options, are available in Bananeweizen's Firefox extension.

List of functionsEdit

(apart from the last two, these pieces of wikitext are obtained after selecting "abc")

'''abc'''
''abc''
[[abc]]
[abc]
== abc ==
[[File:abc]]
[[Media:abc]]
<math>abc</math>
<nowiki>abc</nowiki>
--~~~~
----


Editors who use Wikia's classic source mode editor may be interested in adding custom edit buttons to the editor's toolbar. These buttons allow special characters or chunks of text to be inserted into the edit box.

Note: This toolbar does not appear while editing in visual mode (i.e. such as if you have selected "Enable visual editor" in the editing section of your preferences).

The basic toolbar

The default toolbar looks like this:

button_bold.png
button_italic.png
button_link.png
button_extlink.png
button_headline.png
button_image.png
button_media.png
button_math.png
button_nowiki.png
button_sig.png
button_hr.png
button_wmu.png
button_vet.png
gallery_add.png


You may add custom buttons in your personal wikia.js so that only you can see and use them, or you may add them to MediaWiki:Common.js to make them available to all users on the wikia.

A customised edit bar would look something like this:

Custombuttons

How do I use the buttons

While editing a page in source mode, clicking one of the buttons will insert a symbol or piece of text. For example, clicking the button_bold.png button will insert the following text where the cursor is: '''Bold text'''. If you highlight some text that you want to make bold, clicking this button will put the ''' on either side of the highlighted text so that it will be made bold when the page is published. The other buttons work in a similar way, try clicking some and seeing what they insert.

How do I create and upload button images?

The first thing to do is create a 23x22 image in any image editing program (you can use File:Button_blank.png as a template). Then upload it as you would any other image.

Note: If your image serves a function that other wikias may find useful, please upload the image to Community Central (and be sure to tag it with [[Category:Custom edit buttons]].). You can view buttons others have uploaded at Category:Custom edit buttons.

How do I edit the JavaScript file?

Find the correct JavaScript (.js) page to add it to. To do this you can refer to the JavaScript and CSS Cheatsheet. In general, the JavaScript page to add it to will be one of the following pages:

  • Your personal JS file will be located on the wikia in question at: :User:USERNAME/wikia.js (if you use the Wikia skin),
  • The sitewide JS, which changes the entire site for all users, is located at: MediaWiki:Common.js.
  • If you like to have your personal buttons common to all wikias, place the code in this page: /User:USERNAME/global.js

Add a new mwCustomEditButtons section on the page. You will add one section to the array for each custom button you wish to add. Here's an example of what the page content should look like:

if ( mwCustomEditButtons ) {
	mwCustomEditButtons[mwCustomEditButtons.length] = {
		"imageFile": "http://images.wikia.com/central/images/c/c8/Button_redirect.png",
		"speedTip": "Redirect",
		"tagOpen": "#REDIRECT [[",
		"tagClose": "]]",
		"sampleText": "Insert text"
	};
 
	mwCustomEditButtons[mwCustomEditButtons.length] = {
		"imageFile": "http://images.wikia.com/central/images/c/c9/Button_strike.png",
		"speedTip": "Strike",
		"tagOpen": "<s>",
		"tagClose": "</s>",
		"sampleText": "Strike-through text"
	};
 
	mwCustomEditButtons[mwCustomEditButtons.length] = {
		"imageFile": "http://images.wikia.com/central/images/1/13/Button_enter.png",
		"speedTip": "Line break",
		"tagOpen": "<br />",
		"tagClose": "",
		"sampleText": ""
	};
 
	mwCustomEditButtons[mwCustomEditButtons.length] = {
		"imageFile": "http://images.wikia.com/central/images/7/74/Button_comment.png",
		"speedTip": "Comment visible only for editors",
		"tagOpen": "<!-- ",
		"tagClose": " -->",
		"sampleText": "Insert comment here"
	};
}

If you want to add a new button, copy this section:

	mwCustomEditButtons[mwCustomEditButtons.length] = {
		"imageFile": "http://images.wikia.com/central/images/7/74/Button_comment.png",
		"speedTip": "Comment visible only for editors",
		"tagOpen": "<!-- ",
		"tagClose": " -->",
		"sampleText": "Insert comment here"
	};

Then paste it before the last closing brace: }. From there, replace each value to match what you want the button to do. The values are:

imageFile
The full URL to the image.
You may find the full URL to the image by going to the image description page and clicking the hyperlink below the image to see the full-size image. Use the URL from the resulting image-only page.
The image must be stored on your local Wikia or on Community Central — it must use a Wikia.com URL.
speedTip
The tool-tip text (shown when you hover the mouse over the button).
tagOpen
The opening tag
tagClose
The closing tag (omitted if there is no sample text needed).
sampleText
The text that will be automatically highlighted upon insertion (between the two other tags), this is intended to be replaced by you when you type. Leave this blank if you don't need to put anything between the opening and closing tags.

Once you have published the page and refreshed your browser's cache, your custom buttons will appear when you edit a page in source mode.

See also

Available uploaded images here:

Some available image repositories (copy and upload here as needed):

More examples at:

Further Help and Feedback

Around Wikia's network

Random Wiki