Wikiwyg - Turn any HTML div into a wysiwyg and wikitext edit area.
// This code enables a div to be a Wikiwyg area var myDiv = document.getElementById('some_id'); var myConfig = { imagesLocation: '../../images/', javascriptLocation: '../../lib/', doubleClickToEdit: true } 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( 'href', /action=edit/, function() { myWikiwyg.editMode(); return false; } ); }
// You'll likely want to sublass Wikiwyg for your application. // Wikiwyg will work fine on its own but some behavior is undefined. proto = new Subclass('Wikiwyg.MySubclass', 'Wikiwyg');
proto.modeClasses = [ 'Wikiwyg.Wysiwyg', 'Wikiwyg.Wikitext.MySubclass', 'Wikitext.Preview' ];
proto.saveChanges = function() { // code to save edit changes to your system }
// A subclass to customize Wikiwyg.Wikitext for your wiki variation proto = new Subclass('Wikiwyg.Wikitext.MySubclass', 'Wikiwyg.Wikitext'); // etc...
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. * Preview mode - Display mode without saving changes.
Wikiwyg allows you to switch between modes, delegating some of the processing to the server when necessary.
* Works in Internet Explorer and Mozilla browsers. * 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 the modeClasses property.
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.
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.
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
To create a new subclass, Wikiwyg provides a special constructor called
Subclass
. It takes two string arguments: the name of the new class,
and optionally the name of the parent class. Subclass
provides each object
with two extra attributes: classname
and superfunc
. Here is a typical
usage in Wikiwyg:
proto = new Subclass('Wikiwyg.Wikitext.Mine', 'Wikiwyg.Wikitext'); proto.markupRules = { bold: ['bound_phrase', "'''", "'''"], italic: ['bound_phrase', "''", "''"] }; proto.enableThis = function() { this.superfunc('enableThis').call(this); // Call the base enableThis this.textarea.height = '400px'; // alert(this.classname + ' is all set up!'); }
* http://www.wikiwyg.net/ * http://wiki.wikiwyg.net/ * http://demo.wikiwyg.net/ * http://www.openjsan.org/ * wikiwyg-dev@wikiwyg.net
Wikiwyg currently only works in Internet Explorere 6.0 and in Gecko browsers like Mozilla Firefox. Other browsers like Safari and Opera will hopefully be supported later.
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.
Brian Ingerson <ingy@cpan.org> Casey West <casey@geeknest.com> Chris Dent <cdent@burningchrome.com> Matt Liggett <mml@pobox.com> Ryan King <rking@panoptic.com> Dave Rolsky <autarch@urth.org>
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