FrontPage RecentChanges AboutWikiFeatures WikiNode

WysiwygEditor

What you see is what you get. Edit wiki without a special input form; Have a graphical user interface to editing the text.


A “WYSIWYG” editor lets you see, as you type, what it is that you’ll get. Hence: “Why You See Is What You Get.” WYSIWYG is pronounced “wizzy-wig.”

Generally, on wiki, you have separate input and output formats.

Input:

 * normal
 * //italic//
 * **bold**

Output:

In a WYSIWYG editor, you’d just highlight text and say, “make this bold.” You’d see the text turn bold.

WYSIWYG could make wiki a lot more accessible to people who aren’t comfortable with computers and strange syntax, but none-the-less have lots of interesting things to contribute.

Possibilities

Browser support for HTML editing

The two major browsers support some kind of HTML editing technology. Internet Explorer has the MSHTML Editing Platform; Mozilla has Midas and Mozile. Both allow for editing HTML in browser in a WYSIWYG window-y thing.

A couple of projects have abstracted the API of each technology and made new platforms that sit on top of each. HTMLArea and ePoz both work well and look really slick.

Current Constraints

  1. Backward Compatability
    1. The first big problem is that only late-model versions of IE and Mozilla have these technologies. So, users of older browsers just see a textbox full of HTML – which makes things counter to Wiki:WikiPrinciples. However, it’s theoretically possible to show the WYSIWYG interface to those who can handle it, and the “old” markup interface to those who can’t, or to those who prefer it.
    2. The big problem with this is that these technologies work on rendered HTML. So you either have to store HTML or WikiMarkup on the back end. It’s hard to parse the HTML back to WikiMarkup for storage, or vice versa.
  2. Wiki Functionality
    1. It is important that several of the other features of a wiki: Recent Changes, Current Links, Search work well in the new WYSIWYG environment. Since currently, the wiki markup is easy to search through, this makes all of this possible.
    2. creating new pages - many of the solutions out there are just editors, no wiki creation capability
  3. Source view vs. WYSIWYG view
    1. The new WYSIWYG editors allow to flip between views. The Wiki model is just to keep it in source view. Much more simple of an approach.

HTML versioning

now, that there is HTMLArea or other HTML editing easy to use WYSIWYG tools, WikiMarkup is not so useful anymore. And HTML DOM (Document Object Model) could help to track versions’ diffs neatly. In the end - wiki basic idea is collaboration but not TextFormatingRules.

HtmlDiff

HtmlDiff functionality is available in perl and python: http://esw.w3.org/topic/HtmlDiff

Example http://wiki.webwareforpython.org/htmlwikisandbox (need registering without aprooval) proposal from wikipedia http://meta.wikipedia.org/wiki/WYSIWYG_editor#HTML_to_Wiki_markup

Html Tidy

its possible to use HtmlTidy| and then continue diffs on per line basis.

SVG whiteboard

SVG supports text, images, linking, etc. The techniques described on WikiWhiteboard could be used for making WYSIWYG edits, too. In fact, there’s probably not a great reason to separate the two concepts out.

Java / ActiveX / Plugin

Some kind of Java applet, ActiveX control, or plugin would work. Of the three, Java has the benefit of being supported on a number of platforms and different browsers, and not requiring a download.

Javascript / DHTML

It’s possible but really hard to do some kind of HTML editing with pure Dynamic HTML and Javascript.

RomanIvanov: take a look on http://wackowiki.com/WikiEdit project.

Implementations

Several wiki have already implemented WYSIWYG editors.

status wiki engines
Implemented MoinMoin (primitive), PmWiki (experimental HtmlArea add-on), EditMe (demo, login as “admin”, password “demo”), Zwiki
Developing -
Intend to Develop -
Considering -
Rejected -

Activity

Terminology

WYSIWYG - “What you see is what you get.”

Problems

Primitive Interfaces

Primitive web interfaces, or all-text interfaces (such as Lynx) are not able to interact with Java or JavaScript, and may be locked out of a WYSIWYG environment.

See Also

WysiWiki is a wiki dedicated to the exploration of this wiki features. If you are interested in developing the idea of WYSIWYG in wiki, this is the place to be.

HTMLArea is a sophisticated, free, customizable, on-line editor. See their "fully loaded example" for a quick idea of what it can do.

There is a lot of talk about the idea on Ward’s Wiki: Wiki:WysiwygWiki and on Meatball: MeatBall:WysiwygWiki

Many notes on how to implement this (with full JavaScript code) are available at OpenWiki:WikiEditor.

Contributors


CategoryFeature CategoryEditing