Manual:Custom edit buttons

From MediaWiki.org
(Redirected from Customizing edit toolbar)
Jump to: navigation, search
WikiEditor
Old toolbar

You have to differentiate between the old toolbar and the new one added by Extension:WikiEditor.

To add new buttons you need to include them in your personal JavaScript. In Localsettings.php add $wgAllowUserJs = true; or in the MediaWiki:Common.js or as a Gadget.

Extension:WikiEditor[edit | edit source]

jQuery(document).ready(function ($) {
    $('#wpTextbox1').wikiEditor('addToToolbar', {
        section: 'advanced',
        group: 'format',
        tools: {
            buttonId: {
                label: 'Comment visible only for editors',
                type: 'button',
                icon: '//upload.wikimedia.org/wikipedia/commons/f/f9/Toolbaricon_regular_S_stroke.png',
                action: {
                    type: 'encapsulate',
                    options: {
                        pre: "<!-- ",
                        peri: "Insert comment here",
                        post: " -->"
                    }
                }
            }
        }
    });
});
See: Extension:WikiEditor/Toolbar customization for more on the wikiEditor

You may also use the InsertWikiEditorButton script (by Krinkle) to simplify adding buttons to the wikiEditor.

mw.user.options.get( 'usebetatoolbar' ) can be used to check if a user is using the wikiEditor (true) or the old toolbar (false).

Classic edit toolbar[edit | edit source]

var addExtraButtons = function(){
    mw.toolbar.addButton( {
        imageFile: '//upload.wikimedia.org/wikipedia/en/3/34/Button_hide_comment.png',
        speedTip: 'Comment visible only for editors',
        tagOpen: '<!-- ',
        tagClose: ' -->',
        sampleText: 'Insert comment here',
        imageId: 'button-comment'
    } );
};
 
if( $.inArray( mw.config.get( 'wgAction' ), [ 'edit', 'submit' ] ) !== -1 ) {
    mw.loader.using( 'user.options', function () {
        if ( ! mw.user.options.get( 'usebetatoolbar' ) ) {
            mw.loader.using( 'mediawiki.action.edit', function(){
                $( addExtraButtons );
            } );
        }
    } );
}

Add buttons[edit | edit source]

You can add custom edit buttons to the edit toolbar above the edit window.

To add custom edit buttons, edit:

User:Your username/skinname.js -- the buttons will only show up for yourself. (Important: In Localsettings.php add $wgAllowUserJs = true; )
or MediaWiki:Common.js -- they will show to all wiki users.

Example:

 if (mwCustomEditButtons) {
 
   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 address to the edit button image.
  • tagOpen is the opening tag, in this example: <!--
  • tagClose is the closing tag, in this example: -->
  • sampleText is the sample text that will appear between the opening and closing tags. The editor should replace this sample text with his or her own text.

Please do not hotlink images from Wikimedia Commons or Wikipedia! Upload them to your web host instead. See the next section to upload images from wikipedia.

Example: using a script on Unix, Linux, Mac[edit | edit source]

To use a script for downloading images from English Wikipedia:

Create a file with the URLs:

$ cat >urls
 http://upload.wikimedia.org/wikipedia/en/c/c9/Button_strike.png
 http://upload.wikimedia.org/wikipedia/en/1/13/Button_enter.png
 http://upload.wikimedia.org/wikipedia/en/8/80/Button_upper_letter.png
 http://upload.wikimedia.org/wikipedia/en/7/70/Button_lower_letter.png
 http://upload.wikimedia.org/wikipedia/en/5/58/Button_small.png
 http://upload.wikimedia.org/wikipedia/en/3/34/Button_hide_comment.png
 http://upload.wikimedia.org/wikipedia/en/1/12/Button_gallery.png
 http://upload.wikimedia.org/wikipedia/en/6/60/Button_insert_table.png
 http://upload.wikimedia.org/wikipedia/en/f/fd/Button_blockquote.png
 http://upload.wikimedia.org/wikipedia/commons/7/79/Button_reflink.png

Download images with wget

$ wget -N -i urls

See also[edit | edit source]

Language: English  • 日本語