User:Conrad.Irwin/editor tutorial.js

Note – after saving, you may have to bypass your browser’s cache to see the changes.

Mozilla / Firefox / Safari: hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Command-R on a Macintosh);
Konqueror and Chrome: click Reload or press F5;
Opera: clear the cache in Tools → Preferences;
Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5.

This script lacks a documentation subpage. Please create it.

Useful links: root page • root page’s subpages • links • redirects • your own

// A basic editor.js plugin, adds an EDIT button to the toolbox 
// which, when clicked, adds "hello world" to the entry.
//
// This is about as simple as it gets. There are more fun things you 
// can do, which are documented at [[User:Conrad.Irwin/Editor_docs]]
// or, failing that, in my head. 

$(function() //This code runs when body is loaded.
{
    mw.util.addPortletLink('p-tb', 'javascript:doMyEdit()', 'EDIT');
}); 

function doMyEdit()
{
    function addHelloWorldToWikitext(wikitext)
    {
        return wikitext + "\nhello world";
    }

    var editor = Editor();


    // Just check they really want to
    if (confirm("Are you sure you want to add Hello World to this article?"))
    {
        var bodyContent = document.getElementById('bodyContent');
        var nodeToInsert = newNode('p', 'hello world');

        var insertBefore = bodyContent.lastChild;

        while (insertBefore.className != "printfooter")
            insertBefore = insertBefore.previousSibling;
        
        // Register the edit, this causes the top-left box to show, and the Undo Redo buttons to activate.
        // The page is not saved until the user clicks save.
        editor.addEdit({

            // The function to call to change the wikitext
            edit: addHelloWorldToWikitext,

            // The function to call to change the HTML
            redo: function () { bodyContent.insertBefore(nodeToInsert, insertBefore); },

            // The function to call to unchange the HTML (REQUIRED so that undo works)
            undo: function () { bodyContent.removeChild(nodeToInsert); },

            // The node to highlight green so that the user notices there is an unsaved change (OPTIONAL)
            node: nodeToInsert,

            // The edit summary
            summary: "Added hello world to the end."
        });
    }
    else
    {
        // Display an error in the edit window in the top left.
        editor.error("You pressed cancel");
    }

}