About Wikiwyg

NAME

Wikiwyg - Turn any HTML div into a wysiwyg and wikitext edit area.

SYNOPSIS

    // This code enables a div to be a Wikiwyg area
    var myDiv = document.getElementById('some_id');
    var myConfig = {
        baseUri: '../../',        // location of `images` directory
        doubleClickToEdit: true   // doubleclick on div turns on Wikiwyg
    }
    var myWikiwyg = new Wikiwyg.MySubclass();

    // Attempt to enable Wikiwyg for some div
    myWikiwyg.createWikiwygArea(myDiv, myConfig);
    
    // Change some link(s) to turn on the wikiwyg area
    if (myWikiwyg.enabled) {
        Wikiwyg.changeLinksMatching(/action=edit/);
    }

    // You'll likely want to sublass Wikiwyg for your application.
    // Wikiwyg will work fine on its own but some behavior is undefined.
    Wikiwyg.MySubclass = function() {}
    Wikiwyg.MySubclass.prototype = new Wikiwyg();

    Wikiwyg.MySubclass.prototype.modeList = [
        'Wikiwyg.Wysiwyg',
        'Wikiwyg.Wikitext.MySublass',
        'Wikitext.Preview'
    ];

    Wikiwyg.MySublass.prototype.saveChanges = function() {
        // code to save edit changes to your system
    }

    // A subclass to customize Wikiwyg.Wikitext for your wiki variation
    Wikiwyg.Wikitext.MySubclass = function() {}
    Wikiwyg.Wikitext.MySubclass.prototype = new Wikiwyg.Wikitext();
    // etc...

DESCRIPTION

Wikiwyg is a Javascript library that can be easily integrated into any wiki or blog software. It offers the user multiple ways to edit/view a piece of content:

    * Wysiwyg mode - Simple, HTML, Design Mode editing.
    * Wikitext mode - Standard, Wiki, Text Area editing.
    * HTML mode - Raw HTML editing.
    * Preview mode - Display mode without saving changes.

Wikiwyg allows you to switch between modes, delegating some of the processing to the server when necessary.

FEATURES

    * Can lay over any html div and be hooked into the existing edit buttons
      provided by the system.
    * Gracefully falls back to existing functionality if browser does not
      support Wikiwyg.
    * Subclassable to the environment it is being integrated into.
    * Configurable to tweak basic options.
    * Can edit multiple divs on the same page at the same time.
    * Instantaneous switch from view to edit.
    * Implemented as a clean OO library where each enabled div is a Wikiwyg
      object.
    * Toolbar does the right thing in both Wysiwyg and Wikitext modes.
    * Control key shortcuts apply styles without using the toolbar.
    * Adding new modes is as simple as adding new classes to modeList.

PROJECT GOALS

Wikiwyg wants to be a wysiwyg and also traditional editor for preexisting wiki and weblog software packages. The initial targets are the Kwiki wiki project and Socialtext Workspace(tm).

Wikiwyg should become the new TEXTAREA for applications that want more advanced input but don't want to rearchitect their infrastructure.

Wikiwyg is simple to integrate into existing software. In many cases it should require no changes to the server side.

EXTENDING

Wikiwyg uses CamelCase identifiers for public methods and attributes and lower_case_with_underscore identifiers for private methods and attributes.

Nothing is really private in Javascript but the idea is that ``private'' identifiers are Subject to Change. If you need to override private stuff, please go right ahead; then consider notifying the author of your use case, so that things can be refactored to use public methods in a subsequent release.

On the other hand you are highly encouraged to override public methods. That's why they are public :)

For example, to change the layout of the toolbar buttons, you would define your own setToolbarButtons method (after loading the Wikiwyg library).

    Wikiwyg.Toolbar.prototype.setToolbarButtons = function() {
        this.add_toolbar_button('foo');
        ...
    }

NOTE: Creating a flexible library for something like Wikiwyg is a challenge but it is entirely possible. Avoid the temptation to fork the code and instead learn to work with it and contribute back to the project. That way as Wikiwyg matures, so will your integration of it.

SUBCLASSING

NOTE: Javascript doesn't have classes and subsclasses per se, but you can fake them and get encapsulation and inheritance benefits. So please check your purist hat at the front desk...

Wikiwyg is intended to be subclassed. The nature of this beast is that it can only do so much for you. This is your system after all, and Wikiwyg doesn't know all the ins and outs of it. Wikiwyg provides methods for the things it wants to do conceptually and leaves it up to you to implement the ones that are specific to your system.

Wikiwyg is actually comprised of several classes (even though they live in one module/file):

    * Wikiwyg -- the main driver class
    * Wikiwyg.Toolbar -- the class for creating/handling the toolbar
    * The Mode Classes:
    ** Wikiwyg.Wysiwyg -- the DesignMode wysiwyg editor
    ** Wikiwyg.Wikitext -- textarea editor with wiki syntax
    ** Wikiwyg.Preview -- an html preview of your changes

You can specify any mode classes you wish with the Wikiwyg.modeList attribute. This is often done in your subclass of Wikiwyg.

The toolbar class is specified with the Wikiwyg.toolbarClass property.

BUGS AND CAVEATS

Wikiwyg currently only works in Gecko browsers like Mozilla Firefox. IE is not currently supported but will be very soon. Other browsers like Safari and Opera will hopefully be supported later.

CREDITS

The Wikiwyg library was written almost from scratch after playing with the code from RTE and WikiEdit. Wikiwyg differs highly in that it is a pure Javascript implementation, and is completely object oriented.

Socialtext: Socialtext is responsible for starting the Wikiwyg effort and putting it into the open for others to use.
Brian Ingerson: Brian started the Wikiwyg project. is currently an employee of Socialtext and also the author of the Kwiki wiki software (http://www.kwiki.org).; See: http://www.socialtext.com
Roman ``Kukutz'' Ivanov <thingol@mail.ru>: Roman wrote WikiEdit which is basically a textarea toolbar. http://wackowiki.com/WikiEdit
Kevin Roth: Kevin wrote the cross-browser rich-text editor (RTE). http://www.kevinroth.com/rte/demo.htm

AUTHORS

    Brian Ingerson <ingy@cpan.org>
    Dave Rolsky <autarch@urth.org>
    Matt Liggett <mml@pobox.com>

COPYRIGHT

    Copyright (c) 2005 Socialtext Corporation 
    655 High Street
    Palo Alto, CA 94301 U.S.A.
    All rights reserved.

Wikiwyg is free software.

This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.

    http://www.gnu.org/copyleft/lesser.txt