User:Krinkle/Scripts/InsertWikiEditorButton

Description

This script enables you easily add new buttons to the "new" WikiEditor toolbar (similar to the way one did in in MonoBook / old toolbar).

Options

section: {String} (optional) The name of the section in the WikiEditor. Defaults to 'main'
id: {String} (required) Unique id (ie. 'my-button')
icon: {String} (recommended) URL to the icon, should be square about 21 to 22px
label: {String} (required) Tooltip displayed when hovering button
insertBefore: {String} (optional) Wikitext to be inserted before the cursor on-click
sampleText: {String} (optional) Text inserted in place of the cursor if no text was selected
insertAfter: {String} (optional) Wikitext to be inserted after the cursor on-click
callback: {Function} (optional) Called when the button is clicked
autoSummary: {mixed} (optional) Null or an Object with the following properties:

- summary: {String} (required) Edit summary that should be used
- position: {String} (optional) 'append', 'prepend' or 'replace'
- delimiter: {String} (optional) delimiter between the (possibly) current summary and the to-be-inserted summary

Usage

// OLD WAY - "classic toolbar":
mw.toolbar.addButton({
	imageId: 'mw-customeditbutton-myspecialbutton',
	imageFile: '//upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Gnome-face-smile.svg/22px-Gnome-face-smile.svg.png',
	speedTip: "Title label",
	tagOpen: "Smile (",
	tagClose: ")",
	sampleText: "sample"
});

// NEW WAY - "WikiEditor":
krInsertWikiEditorButton({
	id: 'mw-customeditbutton-myspecialbutton',
	icon: '//upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Gnome-face-smile.svg/22px-Gnome-face-smile.svg.png',
	label: 'Title label',
	insertBefore: 'Smile (',
	insertAfter: ')',
	sampleText: 'sample'
});

Example

The [[File:Krinkle_InsertWikiEditorButton.js]] code is used for statistics (optional).

/**
 * Extra buttons in toolbar
 * @stats [[File:Krinkle_InsertWikiEditorButton.js]]
 */
$.ajax({ dataType: 'script', cache: true,
	url: 'https://meta.wikimedia.org/w/index.php?title=User:Krinkle/Scripts/InsertWikiEditorButton.js&action=raw&ctype=text/javascript'
}).then(function () {

	// Happy face
	krInsertWikiEditorButton({
		id: "mw-customeditbutton-myspecialbutton",
		icon: "//upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Gnome-face-smile.svg/22px-Gnome-face-smile.svg.png",
		label: 'Insert happy face',
		insertBefore: '[[File:Gnome-face-smile.svg|21px|',
		insertAfter: ']]',
		sampleText: 'Happy face'
	});

	// Monkey
	krInsertWikiEditorButton({
		id: 'mw-customeditbutton-anotherspecialbutton',
		icon: '//upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Gnome-face-monkey.svg/22px-Gnome-face-monkey.svg.png',
		label: 'Insert monkey',
		insertBefore: '[[File:Gnome-face-monkey.svg|21px|',
		insertAfter: ']]',
		sampleText: 'Happy face'
	});

});

In the above example the script adds two buttons ( and ).

Feedback

If you experiences any issues, have suggestions for how something could be better, have a good idea for a feature request – or want to report a bug? Send me a message on my Tools talkpage.