Help:Custom edit buttons

Editors who use the 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:

http://www.wikia.com/skins/common/images/button_bold.png http://www.wikia.com/skins/common/images/button_italic.png http://www.wikia.com/skins/common/images/button_link.png http://www.wikia.com/skins/common/images/button_extlink.png http://www.wikia.com/skins/common/images/button_headline.png http://www.wikia.com/skins/common/images/button_image.png http://www.wikia.com/skins/common/images/button_media.png http://www.wikia.com/skins/common/images/button_math.png http://www.wikia.com/skins/common/images/button_nowiki.png http://www.wikia.com/skins/common/images/button_sig.png http://www.wikia.com/skins/common/images/button_hr.png http://images.wikia.com/extensions/wikia/WikiaMiniUpload/images/button_wmu.png http://images.wikia.com/extensions/wikia/VideoEmbedTool/images/button_vet.png http://images.wikia.com/extensions/wikia/WikiaPhotoGallery/images/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 wiki.

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 http://www.wikia.com/skins/common/images/button_bold.png button will insert the following text where the cursor is:. 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 as a template). Then upload it as you would any other image.

Note: If your image serves a function that other communities may find useful, please upload the image to Community Central (and be sure to tag it with  .). 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 - see Help:Advanced CSS and JS for help with this.

Add a new mwCustomEditButtons section on the JS 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 you want to add a new button, copy this section: 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 wiki 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.