Wikia

Community Central

Help:Custom edit buttons

Talk9
92,080pages on
this wiki


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 toolbarEdit

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 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_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?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 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?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:

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:

	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 after the last closing brace and semicolon: };. 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 alsoEdit

Available uploaded images here:

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

More examples at:

Further Help and FeedbackEdit

Around Wikia's network

Random Wiki