Those who use the Wikia editor's Visual Mode, which is activated by default for new users, will not see the edit toolbar which is displayed above the edit box in a standard MediaWiki installation.

However, those who use source mode may be interested in adding custom edit buttons to this toolbar. These buttons serve a similar function to the CharInsert extension, allowing special characters or chunks of text to be inserted into the edit box.

Note: This toolbar will not appear if you have selected "Enable visual editor" in the editing section of your preferences.

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 wiki.

A customised edit bar would look something like this:

How do I use the buttonsEdit

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 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?Edit

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 Wikia may find useful, please upload the image to Community Central (and be sure to tag it with [[Category:Custom edit buttons]].). Because all uploaded images are served from images.wikia.com anyway, you might as well put them at Central where others can find and use them. That way, your good ideas will spread and there is no need for others to duplicate your efforts. You can view buttons others have uploaded at Category:Custom edit buttons.

How do I edit the JavaScript file?Edit

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 wiki 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 wikis, place the code in this page: http://community.wikia.com/wiki/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 : is 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 alsoEdit

• Help:Edit toolbar

Available uploaded images here:

• Category:Custom edit buttons

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

• Commons:Special:PrefixIndex/File:Button
• Wikipedia:Special:PrefixIndex/File:Button

More examples at:

• Wikipedia:MediaWiki:Common.js/edit.js