WYSIWYG editor

For the more technically inclined, wiki markup is a simple way of formatting a wiki page. However, many would-be users of MediaWiki are put off by what looks to them—rightly—to be code of any sort. These users are adjusted to publishing and editing in a more visually straightforward WYSIWYG (What You See Is What You Get) environment.

The acronym WYSIWYG is most often used, but in the case of MediaWiki, this is false, you can never get exactly what you see, since what you get depends on your browser, screen resolution, fonts, your MediaWiki skin and so on. WYSIWYM (What You See Is What You Mean) is more precise but rare.

State of WYSIWYG and MediaWiki software
In 2009, there was no available 'ready-to-go' package for incorporating full WYSIWYG into the MediaWiki software.

The problem is that any WYSIWYG editor would have to know wikitext grammar, and no full grammar for wikitext exists - the "parser" doesn't parse, it's a twisty series of regular expressions. So present WYSIWYG editors either have to one of the following:
 * Reverse-engineer as much of a grammar as they can
 * Forget wikitext and just write HTML.

A proper grammar is not sufficient for a proper WYSIWYM editor, as opposed to WYSIAYG (what you see is all you get), but it is necessary. A proper grammar is a highly-desired thing for many other purposes as well, and present efforts are at "promising vapourware" status. See Markup spec.

For a list of existing extensions providing some degree of WYSIWYG support, see Category:WYSIWYG extensions

Conceptual
As noted above, HTML TEXTAREAS could be a fallback for older browsers or those that prefer this for fine control. The WYSIWYG editor could also be limited to reflect only existing wiki markup, with its democratically decided simplicities and compromises for complexities -- adding nothing to the wiki markup, only providing a more visually straightforward means of changing the markup....

Implementation
There are a few options for making a WYSIWYG editor that works in the browser.


 * 1) Pure DHTML/Javascript. Capture mouse input, buttons, keystrokes, etc., and actually edit the HTML of the current document. It's not trivial, but possible.
 * 2) Create a custom browser plug-in, Java applet, ActiveX control. This would probably be workable, but would take quite a bit of hackery, and may or may not work. Requiring users to install any sort of plugin is very undesirable.
 * Imho, limited approach. Only Java applet is (possibly) cross-browser compatible. But not all users have Java on their machines and JavaScript is supported by all popular browsers (well, maybe except text-based, but I think that Java wouldn't work there too)... --Shtriter 07:20, 26 July 2006 (UTC)
 * Users using text based browsers don't matter for WYSIWIG. They are going to be happier editing in Creole --Kevin Holzer (see hlzr.net for contact) 12:38, g29 December 2010 (PST)
 * 1) Both Mozilla and Internet Explorer have included ways to make sections of a page editable. IE 5.5 had the MSHTML Editing Platform (archive.org), and Mozilla has its Rich Text Editing API. Both technologies allow Web developers to make parts of a page editable -- in slightly different ways, of course.

Most current in-browser WYSIWYG editors use the third option.

FCKeditor (now CKEditor)
The FCKeditor team has started a project called MediaWiki+FCKeditor. It contains a very strict integration which works with Wikitext as input and output.

The latest implementation extension is at Extension:FCKeditor (Official).

An older experimental implementation of FCKeditor into MediaWiki 1.7.1 is described here which converts your input into HTML. A version based on 1.5.3 can be downloaded from here. Another older implementation using HTML::WikiConverter is described at FCKeditor and HTML::WikiConverter.

A custom version of MediaWiki+FCKeditor is being beta-tested on some wikis at Wikia. For info see the Wikia help page, Help:New editor. See Help talk:New editor for the latest updates.

It's a little more work to get MediaWiki with FCKeditor WYSIWYG to upload images. I have some notes |here, sorry they're not perfect notes. I also updated some Wiki with details about this somewhere, but can't find out where. If you need to update documents you're in trouble, but it's pretty easy to upload images with FCKeditor.

TinyMCE
You can also download the following patch: http://www.logicsupply.com/pub/wysiwyg.patch.zip. This patch integrates TinyMCE into MediaWiki version 1.5.7. The TinyMCE source is included in the patch. I've added an option to the user preferences to enable or disable the editor on a per user basis. All HTML is converted to appropriate wiki markup before previewing/saving.

Limitations include:


 * Links and images must still be specified using wiki markup
 * Preformatted text (lines starting with whitespace) doesn't survive the trip to and from HTML
 * Some features, like underline and strikethrough, have no effect.

If someone wants to hack TinyMCE to make these features work, they're more than welcome.

For details on implementing TinyMCE see the article on TinyMCE.

Also see the above article for a patch against a more recent version of MediaWiki (1.13).

MeanEditor
MeanEditor is a little WYSIWYM editor based on WYMeditor. It targets inexperienced users, and allows them to easily make good contributions. It does not implement the full Mediawiki language, but only the simple subset non-technical people should use. If a page contains esoteric markup, MeanEditor warns the user and disables itself (at the very least, a visual editor should not create additional work for administrators).

We designed MeanEditor with existing wikis (namely, Wikipedia) in mind. Therefore, we have focused on leaving clean diffs and encouraging semantic use of markup (that's the M = mean: no change text size command, but a this is a heading command, and so on). We hope the existing communities will find MeanEditor a good tool they can trust, rather than find annoying.

If no advanced features are needed, MeanEditor is a good choice even for a single-editor wiki.

See the MeanEditor page for more information on the intended use, the detailed feature list and installation instructions.

Mozile
Mozile takes a different approach to editing, using DOM operations instead of the designMode features which most other editors rely on. It also supports structured editing based on RelaxNG. A MediaWiki editing demo is available which makes use of the html2wiki.xsl tool mentioned below.

Wikiwyg
Wikiwyg extension apparently can be used as a MediaWiki extension or with GreaseMonkey. Seems to require a Mozilla-based browser.

Wikia and SocialText launched a joint project in August 2006 to integrate Wikiwyg into MediaWiki. Some of the JavaScript code for the integration is in the Wikiwyg Subversion repository.


 * http://svn.wikimedia.org/viewvc/mediawiki/trunk/extensions/wikiwyg/ -- latest code for MediaWiki integration

Wikizzle
While not providing true WYSIWYG (editing is done directly to wikitext), Wikizzle includes AJAX WYSIWYM editing features similar in purpose to WYSIWYG such as real-time rendering of the article. Runs in Mozilla.

Sun Wiki Publisher for OpenOffice
Runs in the open source, free office suite OpenOffice versions 3 and higher. OpenOffice runs on Windows, Mac, and Linux and is an alternative to the Microsoft Office Suite. The Sun Wiki Publisher extension currently allows one to edit and export wiki pages from editing them like a document in OpenOffice. Like most of these editors, it produces some ugly syntax though.

Other Wiki engines/services that have WYSIWYG
Try out the editing feature on these sites, for some inspiration:


 * http://moinmo.in/ - Open source wiki engine (a software similar to MediaWiki, written in Python)


 * http://www.wikispaces.com - hosted wikis only, no software download


 * http://www.editme.com - wiki farm, hosted wikis only, no software download.


 * http://twiki.org/ - Open source wiki engine


 * http://www.netcipia.net - wiki farm, hosted wikis only, no software download.


 * http://www.jspwiki.org/wiki/WikiWizard - Open source wiki engine (click Edit and then choose editor WikiWizard to see how it works (currently broken)).


 * http://mindtouch.com - Mindtouch Core


 * TikiWiki CMS/Groupware - A full-featured, open source, multilingual, all-in-one Wiki+CMS+Groupware written in PHP


 * http://foswiki.org/ a branch of twiki


 * http://smwforum.ontoprise.com/smwforum/index.php/Main_Page - the semantic enterprise Wiki named SMW+

Other Wiki engines/services that have WYSIWYM

 * http://dev.orf.at, after applying wysiwyg for years, they switched to simple wiki with immediate display: WYSIWYM, see a video here (in German), and a very untechnical description of the syntax here. http://orf.at, http://sport.orf.at, and the mobile versions http://orf.at/l are produced like this.

Internal Links and Images
http://www.aulinx.de/hilfe/plone/bilder/bildeinfuegen.png

Epoz 0.74 features a great tool box to insert internal links and images. It's based on a search box, images are displayed with thumbnails and can be inserted with a single click. Inserting different image sizes is easy to do by customizing the tool box template. More documentation and screenshots (in german)

HTML to Wiki markup
Leveraging the power of existing html editing/spell checking tools makes it necessary to convert the produced html/xhtml to wiki markup.

If we manage to create a python or php script that converts simplified tidy output (xhtml) to wiki-code, this would be easy to do with epoz. Epoz 0.74 feeds the html through tidy on the server via xml-rpc when switching to source view and on save. This works great, it's Plone's standard editor- I used it to write the Squid document for example. Our conversion script can hook in after tidy, the source visible in 'source view' and submitted to the server would be wiki markup. All without reloading the surrounding page. Creating the conversion script is a challenge, but operating on tidy-cleaned xhtml should simplify matters. Epoz only allows structural markup (no font tags etc), so this is mainly a str_replace. With the appropriate configuration tidy will strip the complex things first.

This setup combines the advantages of both worlds by providing two views switchable back and forth without reloading the page:
 * WYSIWYG view: uses the default css and html editing
 * SOURCE view: WIKI source


 * That's great! But I wonder again, why only server-side scripts? I believe that it would be better to do it on client-side and let the user to switch between the views dynamically. There is already very limited but working prototype for it. For further information - contact me. --Shtriter 07:20, 26 July 2006 (UTC)

An XSLT stylesheet for converting HTML to wiki markup is now available: html2wiki.xsl. It is still a work in progress but it can handle a wide range of formatting.

Advantages:
 * XSLT can be used client-side by most modern browsers.
 * The resulting wiki markup can be submitted as if it came from an HTML textarea.

Disadvantages:
 * Much of the white space information is lost during parsing and the XSL transformation.
 * The current MediaWiki parser does not provide enough information about templates and other generated content in an article's HTML.

Any HTML to wiki markup conversion tool will need more information about the generated content than the MediaWiki parser currently includes in the HTML which it generates. Otherwise it will have to interpret templates as normal content, for example, when they should be converted to the syntax. The most direct solution to this problem is to make the parser include more information. In large part this would simply require better use of the "class" attribute. Sometimes it would require adding elements to wrap the generated content.

Proposed changes to the parser: should become &lt;span class="template"&gt; &lt;span class="template-name"&gt;Template name&lt;/span&gt; Expanded template... &lt;/span&gt; The "template-name" class can be marked as  in CSS. &lt;ref&gt;Reference content.&lt;/ref&gt; should become &lt;sup class="reference"&gt; &lt;span class="reference-content"&gt;Reference content.&lt;/span&gt; Reference links and number... &lt;/span&gt; The "reference-content" class can be marked as  in CSS. should become &lt;span class="category-link"&gt;Category name&lt;/span&gt; The "category-link" class can be marked as  in CSS.
 * The &lt;nowiki&gt; tag should become &lt;p class="nowiki"&gt;.
 * Container &lt;div&gt; elements for images should distinguish between the "thumb" class for thumbnails and the "frame" class for frames, even if the CSS for the two classes is the same. The containers for scaled images (those with their size property set) should be marked with a "scaled" class.
 * Templates (but not nested templates) need to be marked as such in the HTML.
 * References need to include their content at the reference point.
 * Category links need to be included in the HTML.

The use of new elements with CSS  is in the spirit of adding semantic structure. It would be possible to use comment tags instead, in order to provide better support for legacy browsers.

Possible problems
Things which need to be worked around include:
 * 1) An editor should support the user in getting a headline right instead of using a big font, marking a citation instead of italicizing text, and so on. Imho most wysiwyg-editors lures people away from thinking about the meaning, and this is wrong. -- ∂ 01:47, 6 August 2006 (UTC)
 * 2) Displaying differences between italics and emphasis, bold and strong emphasis. Italics and bold are only used for articles on typesetting. (Technically mathematical formulae should use &lt;var&gt; but probably people are using &lt;i&gt; as it is shorter.)
 * Mediawiki originally interpreted double apostrophes as emphasis and triple apostrophes as strong, but this has been changed to italics and bold. We should probably get the developers to make up their minds before we start worrying about how a WYSIWYG editor implements it... — Omegatron 22:04, 14 December 2006 (UTC)
 * 1) Displaying formulae and potentially also music, maps, timelines, chess... allow editing?
 * Perhaps MathML supporting browsers will be able to edit formulae
 * There is ajax Math Preview. The source code was here. For more info - google in Mediawiki-l maillist. --Shtriter 07:19, 26 July 2006 (UTC)
 * 1) Displaying templates and allowing editing and inclusion of templates
 * What about protected templates in a non-protected page? (Other similar combinations...)
 * I have an idea. It would show up as a square box with the template name inside, and upon double-clicking a new tab would open (between the text box and formatting buttons) and allow editing of that template. This is a bit like handling of OLE objects in Microsoft Office.
 * I'm working over it on w:User:Pilaf/InstaView/Devel --Shtriter 07:19, 26 July 2006 (UTC)
 * 1) Allow easy input other tags such as strikethrough, often used off the article namespace?
 * No problem. FCKeditor even allows to insert images without any difficulties!
 * Or do you want the delete tag? Maybe we could restrict which buttons were displayed in which namespace to discourage certain tags from being used in the main article namespace? — Omegatron 22:11, 14 December 2006 (UTC)
 * 1) Displaying category links, interlanguage links?
 * Same as MW do? I'm working over it on w:User:Pilaf/InstaView/Devel --Shtriter 07:19, 26 July 2006 (UTC)
 * 1) Over-use of color, size, and other features.  See MySpace.com profiles for examples of people with no design knowlege let loose.
 * Any suggestions? Prohibit color editing? Or at list for not registered users? --Shtriter 07:19, 26 July 2006 (UTC)
 * Seriously. As soon as we implement this the site will turn into Myspace if we don't limit what the interface can do.  It should only be capable of the things that the standard toolbar is capable of.  Users shouldn't be allowed to change fonts, colors or create big bold text for headers, for instance.  If they want to do things like that for special cases, they should be forced to use the source code editor. — Omegatron 22:08, 14 December 2006 (UTC)
 * 1) Issues with users cutting and pasting from word processing software especially Microsoft Word. This results in non-compliant HTML and could be rendered incorrectly (if at all) from non microsoft platforms.
 * We can have it strip anything except basic markup, but we'd have to incorporate a list in the software to indicate what "basic" means. — Omegatron 22:09, 14 December 2006 (UTC)
 * 1) Has anyone else noticed that the fckeditor extension is not usable with any version of PHP after 5.2.5? (running Wampserver 2.0)...
 * I had no problem installing Extension:WYSIWYG on a local XAMPP server under Windows. The WYSIWYG editor works fine in Firefox 5. However, the corporate-installed IE7 blanked out pages that contained certain markup when using WYSIWYG. I didn't have time to figure out which cookie or security settings were needed to fix this. Workaround: If you are using WYSIWYG in IE7, add a step to select the contents of the text area and copy it into your clipboard before you save, just in case the page blanks out. If the page blanks out when you save, open the page for editing, paste the contents of your clipboard and save it again.

Wikipedia-WYSIWYG-Editors not running inside the browser

 * Create in Microsoft Word - official Microsoft Office Word Add-in For MediaWiki
 * You can find a Wikipedia-WYSIWYG-extension for Emacs here: wikipedia:Wikipedia:Text editor support
 * Gwennel Web is a WYSIWYG and WYSIWYM editor for Windows. It supports the basic syntax, templates, references and simple tables (tables with complex styles are rendered as wiki text).

Other text-editors are covered in Wikipedia:Text editor support, too..