User:Cacycle/wikEd customization

Please support wikEd

Please support wikEd by helping to fix the following browser and MediaWiki issues.

Firefox:
- 579763, 579760 Cursor/caret disappears (07-2010)
- 1016372 Space lost when deleting text (05-2014)
- 926230 Space at end of line not styled (10-2013)
- 543204 Focus after search (01-2010)
- 926164 Editor deletes blank before inserted block element when converting to text (10-2013)
- 458524 Automatic syntax highlighting would interfere with undo/redo. The only reason why wikEd does not have automatic syntax highlighting. (10-2008)

Webkit/Chrome:
- None.

This is the customization page for wikEd, a full-featured in-browser text editor that adds enhanced text processing functions to Wikipedia and other MediaWiki edit pages.

Customization

wikEd is fully customizable, including color schemes, language, and custom buttons and functions. Add any number of user configurable variables with your own values to your common.js page. This works for all types of installation, including gadget and Greasemonkey installation.

All available customization options are listed on top of the wikEd program code between the labels "// start of user configurable variables" and "// end of user configurable variables". Typical options as found in the program code look like:

…
// scroll to edit field on non-preview pages
if (typeof(wikEd.config.scrollToEdit) == 'undefined') { wikEd.config.scrollToEdit = true; }
…

or:

…
// use French rules for fix punctuation
if (typeof(wikEd.config.fixPunctFrench) == 'undefined') { wikEd.config.fixPunctFrench = false; }
…

Customization examples

For customizing the above settings, you would have to add the following lines to your common.js page:

var wikEdConfig = { 'scrollToEdit': false, 'fixPunctFrench': true };

or:

var wikEdConfig = {};
wikEdConfig.scrollToEdit = false;
wikEdConfig.fixPunctFrench = true;

Use only one single var wikEdConfig = {…} statement, otherwise you would overwrite your previous customization. Add any additional customizations as wikEdConfig.setting = value;

Keyboard shortcuts

Define keyboard shortcuts for wikEd buttons (wikEd button number: ['key string', JS key code],).
Button number: check the program code (under User:Cacycle/wikEd.js) starting with "// format top". Example:

var wikEdConfig = {};
wikEdConfig.buttonKey = {
  46: ['a', 65], // shift-alt-a: "replace all" button shortcut
  82: ['p', 80], // shift-alt-p: wikEd preview button shortcut
   3: ['b', 66], // shift-alt-b: "bold" button shortcut
  26: []         // clear the existing interfering 'b' button definition
}

RegExTypoFix

Show the button to fix common typos using AutoWikiBrowser RegExTypoFix rules:

var wikEdConfig = {};
wikEdConfig.regExTypoFix = true;

Use different RegExTypoFix rules. This address must have the exact same domain name as the used wiki. On the French Wikipedia you could use:

var wikEdConfig = {};
wikEdConfig.regExTypoFixURL = '//fr.wikipedia.org/w/index.php?title=Wikipédia:AutoWikiBrowser/Typos&action=raw';

Various

Change a syntax highlighting style:

var wikEdConfig = {};
wikEdConfig.frameCSS = { '.wikEdLinkName': 'color: #00a000; font-weight: bold;' };

Change an edit page main window CSS rule:

var wikEdConfig = {};
wikEdConfig.mainEditCSS = { '.wikEdPreviewBox': 'background: #faf8f6; padding: 5px; border-width: 1px; border-style: solid; border-color: #404040 #ffffff #ffffff #404040;' };

Change a user interface (button) image:

var wikEdConfig = {};
wikEdConfig.image = { 'logo': '6/67/my_logo.png' };

Change a user interface text (uses wikEdText instead of wikEdConfig):

var wikEdText = {};
wikEdText = {
  'wikEdLogo alt': 'wikEd',
  'wikEdLogo title': 'wikEd {wikEdProgramVersion}, click to disable'
};

Add your own summary presets:

var wikEdConfig = {};
wikEdConfig.comboPresetOptions = {};
wikEdConfig.comboPresetOptions.summary = [
 'super-duper mega edit', 'copyedit', 'reply', 'article created', 'intro rewrite',
 'linkfix', 'fixing typos', 'removing linkspam', 'reverting test',
 'reverting vandalism', 'formatting source text', '{wikEdUsing}'
];

Add your own (regexp) presets to the search and replace fields:

var wikEdConfig = {};
wikEdConfig.comboPresetOptions = {};
wikEdConfig.comboPresetOptions.find = [
 '\n +', 'wiked'
];
wikEdConfig.comboPresetOptions.replace = [
 '\n', '\'\'\'wikEd\'\'\''
];

Change a user interface CSS style:

var wikEdConfig = {};
wikEdConfig.mainCSS = {
  '.wikEdButton': 'background: blue;'
};

Enable the Source button to display the source code of pasted content or of syntax highlighted text:

var wikEdConfig = { 'wikEdShowSourceButton': true };

Change the presets of the toggle buttons in the wikEd control bar:

var wikEdConfig = {
  'highlightSyntaxPreset': true,
  'useWikEdPreset': true,
  'usingPreset': false,
  'fullScreenModePreset': false,
  'closeToolbarPreset': false,
  'refHidePreset': false,
  'diffPreset': false
}

Change the history lengths:

var wikEdConfig = {
  'historyLength': {
    'find': 15,
    'replace': 15,
    'summary': 20
  }
};

Display a button to automatically append "…using wikEd" (or another text) to the edit summaries:

var wikEdConfig = {
  'showUsingButton': true,
  'summaryUsing': '…still using wikEd'
};

Do convert   character entities to non-breaking spaces when saving a page. Note that it will still be converted to   at the time of editing.

var wikEdConfig = {};
wikEdConfig.nbspToChar = true;

Custom buttons

You can add your own editing buttons and functions to two custom button bars, one to the right of the formatting buttons (custom1) and the other one to the right of the fixing buttons (custom2). Add the following code to your monobook.js page and remember to clear the browser cache afterwards by pressing Shift-Reload. When using wikEd under Greasemonkey, you have to add the handler function code to the wikEd Greasemonkey code bundle.

The example implements a "<div>...</div>" button but can easily be adjusted for other needs:

var wikEdConfig = {};

// define custom buttons
// button number: [id, class, tooltip, image url, width, height, alt text, onclick handler code were obj is the button element]
wikEdConfig.button = {
	100: ['wikEdDiv', 'wikEdButton', 'Make the selection a html DIV element', '//upload.wikimedia.org/wikipedia/commons/6/67/WikEd_logo.png', '16', '16', 'DIV', 'wikEd.EditButton(this, this.id, null, TestHandler);' ],
	101: ['wikEdTest', 'wikEdButton', 'This is a test button', '//upload.wikimedia.org/wikipedia/commons/0/07/WikEd_disabled.png', '16', '16', 'Test', 'wikEd.EditButton(this, this.id, null, TestHandler);' ]
};

// define custom button bars
// button name: [id outer, class outer, id inner, class inner, height, grip title, button numbers]
wikEdConfig.buttonBar = {
	'custom1': ['wikEdButtonBarCustom1',  'wikEdButtonBarCustom1',  'wikEdButtonsCustom1',  'wikEdButtonsCustom1',  44, 'My custom buttons', [100, 'br', 101] ],
	'custom2': ['wikEdButtonBarCustom2',  'wikEdButtonBarCustom2',  'wikEdButtonsCustom2',  'wikEdButtonsCustom2',  44, 'My custom buttons', [100, 'br', 101] ]
};

// define the function which is called upon clicking the custom button
// this example code adds or removes div tags around the selected text

function TestHandler(obj) {

	// select the appropriate text change target (whole, selection, cursor, focusWord, focusLine, selectionWord, or selectionLine)
	// focus... refers to the text under the cursor; ...Word and ...Line extend the target to the start/end of the word or line
	wikEd.GetText(obj, 'selection, cursor');
	if (obj.selection.plain != '') {
		obj.changed = obj.selection;
	}
	else {
		obj.changed = obj.cursor;
	}

	// make the changes to the plain target text
	if ( /<div>([\s\S]*?)<\/div>/i.test(obj.changed.plain) ) {

		// remove the previously added formatting
		obj.changed.plain = obj.changed.plain.replace(/<div>([\s\S]*?)<\/div>/gi, '$1');
	}
	else {

		// add the text formatting
		obj.changed.plain = '<div>' + obj.changed.plain + '</div>';

		// move spaces outside
		obj.changed.plain = obj.changed.plain.replace(/(<div>)( *)([\s\S]*?)( *)(<\/div>)/, '$2$1$3$5$4');
	}

	// keep the changed text selected, needed to remove the formatting with a second custom button click
	obj.changed.keepSel = true;
	return;
}