Help:Custom edit buttons

Those who use the Wikia rich text editor, 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 the standard interface 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 "Use in-page editor" in your preferences, or if you have deselected "Show edit toolbar (JavaScript)".

You may add custom buttons in user/monaco.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 your Wikia.

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 Image: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 Central Wikia (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 Wikia:Category:Custom edit buttons.

How do I edit the Javascript file?

Find the correct Javascript (.js) file. Your personal js will be located at http://WIKINAME.wikia.com/wiki/User:USERNAME/monaco.js (if you use the Monaco skin), while the sitewide js will be located at http://WIKINAME.wikia.com/wiki/MediaWiki:Common.js. If you like to have buttons common to all wikis, place the code in this page http://www.wikia.com/wiki/User:USERNAME/global.js

Simply edit the file to add a new section to the mwCustomEditButtons array. You will add one section to the array for each custom button you wish to add.

 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"}
  }

• 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 the Central Wikia -- 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 user input.

Once saved, the .js file will be parsed when an edit page is loaded, and your custom buttons will appear.

See also

• Help:Edit toolbar

Available uploaded images here:

• Wikia:Category:Custom edit buttons

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

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

More examples at:

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