User:Cacycle/wikEd development

This is the developer page and program documentation for wikEd, a full-featured in-browser text editor that adds enhanced text processing functions to Wikipedia and other MediaWiki edit pages. Please use this talk page for discussing wikEd development issues.

How it works

wikEd replaces the classic textarea input field with an iframe in designmode. That is essentially a separate html page that can be edited. The browser's rich-text editing interface is used to manipulate the text upon clicking a wikEd button, see [1]. After pushing the Save page button the content is copied back to the hidden textarea and then submitted.

Program structure

Basic initialization

Built-in user interface texts

Edit-frame css rules

Main window css rules

Button image URLs

Button definitions

Toolbar definition

User customizable variables

Global variables including DOM elements

Check for updates (Ajax)

Schedules the setup routine to run after the page has been loaded

WikEdSetup() — the setup routine

Loads the diff script

Loads the Live Preview script

Rearranges page elements into wrapper divs

Puts the wikEd buttons on the page

Generates the combo input boxes (input with drop-down button)

Generates the iframe in design mode that replaces the classic textarea input field

Copies the textarea content to the iframe

Event handler definitions

Load and parse the RegExTypoFix rules using Ajax

WikEdAutoUpdate() — check for the latest version using Ajax, forced reload of page to update
WikEdLoadTypoFixRules() — load and parse the RegExTypoFix rules using Ajax
The button handlers:
- WikEdButton() — for buttons that do not require nor change the text (fast)
- WikEdEditButton() — for buttons that require or change the text (slow)
Helper subroutines:
- WikEdWikifyHTML() — converts pasted html code into plain text wikicode
- WikEdHighlightSyntax() — highlights the syntax by adding html code to the plain text
- WikEdUpdateTextarea() - copies the frame content to the textarea, strips html formatting
- WikEdUpdateFrame() - copies the textarea content to the frame
- WikEdGetInnerHTML() - gets the innerHTML from a document fragment
- Cookie management routines
- Get recursive custom offsets:
  - WikEdGetOffsetTop() - gets the element offset relative to the window top
  - WikEdGetOffsetLeft() - gets the element offset relative to the left window border
- WikEdParseDOM() - parses a DOM subtree and and adds the plain text into a complex data structure
- WikEdStyleSheet() - creates a new style sheet object (cross-browser)
- Debugging routines
- WikedInsertTags(): overrides the insertTags function in wikibits.js, used for the standard Wikipedia toolbar buttons

Programming conventions

Subroutine names start uppercase
Variable names start lowercase
Global variables start with wikEd..., global (i.e. all) functions start with WikEd... for reasons of compatibility with other scripts

Greasemonkey-compatibility

Global variables must be declared as follows:
window.variable = 123;
Global subroutines must be declared as follows:
window.WikEdSubroutine = function(parameter) { ... }
Event listeners must be registered as follows, DOM element declarations (onclick="") do not work:
element.addEventListener('click', WikEdGlobalFunction, true);

element.addEventListener('click', function(event, variable) { ... }, true); // uses the last value of variable

If possible, please use the wikEd wrapper: WikEdAddEventListener(element, 'click', WikEdGlobalFunction, true)
Custom attributes of DOM elements:
element.setAttribute('custom') = 123;

var attribString = element.getAttribute('custom'); // it is always a string!
It is NOT possible to access functions, objects, or variables from other scripts running on the page

Debugging setup

For performance reasons it is highly recommended to test the scripts on a local copy of a Wikipedia edit page.

Copy the whole wikEd program code from the page wikEd.js to D:\wikEd\wiked.js
Copy the whole diff program code from the page diff.js to D:\wikEd\diff.js
Copy the whole InstaView code from the page instaview.js to D:\wikEd\instaview.js
Do the same for: http://en.wikipedia.org/w/skins-1.5/common/ajax.js, http://en.wikipedia.org/w/skins-1.5/common/wikibits.js, http://en.wikipedia.org/w/skins-1.5/common/site.js, http://en.wikipedia.org/w/index.php?title=MediaWiki:Monobook.css&action=raw&ctype=text/css, http://en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&action=raw&ctype=text/css
Save a Wikipedia edit page of your choice to D:\wikEd\test.html
Open the page in your text editor and change all addresses of scripts, css files, and images their respective local copies. All other relative links starting with "/ have to be preceded with "http://en.wikipedia.org".
Set the following configuration variables in the header JavaScript of the edit page:

var wikEdAutoUpdate = false;
var wikEdUseLocalImages = true;
var wikEdImagePathLocal = 'file:///D:/wikEd/images/'; // the directory were you keep all wikEd button images
var wikEdSkipBrowserTest = true; // this enables wikEd under IE and Opera
var wikEdShowSourceButton = true;
var wikEdDiffScriptSrc = 'file:///D:/wikEd/diff.js'; // the local diff program used for 'Show current changes below'
var wikEdInstaViewSrc = 'file:///D:/wikEd/instaview.js'; // InstaView AJAX preview

For finally testing the code on Wikipedia, every developer should create a code page in his own user space ending with .js (e.g. User:YourUsername/wikEd_dev.js). These pages can only be edited by the owner for security reasons.

Making wikEd cross-browser compatible

Recent events

wikEd 0.9.45rc starts up in MSIE 7 without an error message! The browser test has to be bypassed by using the above user configuration settings. The next steps should fix the user interface, i.e. working on WikEdSetup(). Cacycle 03:08, 26 September 2007 (UTC)

External links