Through-The-Web (TTW) Editors

Mark D. Anderson (mda@discerning.com)
Created 2004 Nov 15
Notes added 2007-Apr-20
  New editors:
    FreeRichTextEditor (FreeRTE) http://www.freerichtexteditor.com
      CC attribution license.
      good cross-platform support.
      no graphic image picker.
      not WYSIWYM (change fonts, etc.)

Notes added 2007-Jan-11
  New editors:
    WYMeditor http://www.wymeditor.org/en/
      MIT/GPL dual license. primarily by Jean-Francois Hovinne 
      looks good in approach. image inserter has no server-side browse, though there is
         discussion at http://trac.wymeditor.org/trac/wiki/Customization
      uses contentEditable just like everyone else, but works hard at cleanup
      limitations in current version (v0.2):
          does not support more than one per page
          requires initial content in a div, not a textarea (fixed in v0.3)
          only supports IE and Gecko (not Opera or Safari)
          only a very basic image browser
    loki http://apps.carleton.edu/opensource/loki/
      GPL. has nice image popup and table support.
      no Safari support. requires a fair amount of js to setup (in Loki 2 beta).
      seems somewhat based on TinyMCE
    OpenWysiwyg http://www.openwebware.com/products/openwysiwyg/demo.shtml
      LGPL. only a basic insert image popup. no Safari support. easy to integrate.
      does not produce clean xhtml.

  BitFlux (BXE) had a 2.0 rewrite in 2005: http://wiki.bitfluxeditor.org/BXE_2.0
    still Gecko only

  Xinha has a fair number of plugins now; Stylist and SuperClean help to achieve what WYMeditor wants 
    there are multiple image popups:
       builtin popups/insert_image.html - no image browsing
       ImageManager - has directory chooser; upload and browse. based on the  Xiang Wei Zhuo image browser for htmlarea
          seems to screw with relative urls in existing img elements.
       ExtendedFileManager - slightly different/improved ImageManager; both require embedded to configure php
          see http://xinha.python-hosting.com/ticket/811
       InsertPicture - exclusively for browsing server-side images

  What with the AJAX hype, there are several standalone popup image browsers/pickers/choosers/managers:
     http://codex.wordpress.org/Plugins/Images
       list of many for WP
     http://dmoz.org/Computers/Programming/Languages/PHP/Scripts/Image_Galleries/
       designed for full page, but could probably be adopted for a popup
       for example GPL PHP Wabbit http://wabbit.arnoldcistai.net/index.php
     jMaki http://www.javaserver.org/jmaki/
       has its own implementation of an Image Browser
       BSD license
     YUI-Ext http://www.jackslocum.com/blog/2006/12/17/how-to-create-a-reusable-ajax-driven-web-dialog-a-working-example/
         http://www.yui-ext.com/deploy/yui-ext/docs/#../examples/view/chooser.html
         bsd license
     YUI http://billwscott.com/carousel/
     Adobe Spry http://labs.adobe.com/technologies/spry/demos/gallery/#
         bsd license
         article at http://labs.adobe.com/technologies/spry/articles/photo_album/
     Gallery2 Image Chooser http://g2image.steffensenfamily.com/index.php?title=Main_Page
       for TinyMCE, WordPress, or standalone
     IMCE http://drupal.org/project/imce
       http://ufku.com/drupal/imce/demo
       for TinyMCE or PCKEditor
     http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm
     http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P20/

  Kupu appears to have a nice image picker, but, like, they have no demo, and no
    easy way of installing. After 3 years. Sigh.
    Extreme googling turns up a demo at http://johnnydebris.net/kupu_nightly/kupu/common/kupu.cgi

  There is a second TinyRTE, unrelated to the first: http://tinyrte.outraxx.de/ 
    It is really just TinyMCE

  Dojo's RichEdit now has a toolbar: http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book78
    but it still has far to go to match the competition in features

  Some new reviews/discussions at:
    http://meta.wikimedia.org/wiki/WYSIWYG_editor
      comparison of TinyMCE, FCKEditor, Mozile, and others
    http://blog.ianbicking.org/evaluating-wysiwyg-editors.html
      lots of hearsay
    http://www.standards-schmandards.com/2007/wysiwyg-editor-test-2/
    http://www.standards-schmandards.com/2006/wysiwyg-editor-test
    http://www.standards-schmandards.com/exhibits/wysiwyg/result.html
      basic result seems to be that the open source ones suck
      but the top ones (XStandard and EditOnPro) aren't pure-js solutions


Note 2006-Jun-07
  There are now several image managers out there, such as:
    LGPL iManager and GPL iBrowser
      http://j-cons.com/main.php?pbcat=about&pbid=intro&title=intro
      PHP, iManager does manipulation
      works with several different ttw editors, including Xinha
      except now seems dead
    Xinha has an ImageManager and an InsertPicture plugin 
      ImageManager is a quite ugly bit of backend php

Note 2006-Jan-17
  Dojo http://dojotoolkit.org/docs/rich_text.html
    discussion here: http://ajaxian.com/archives/dojo-rich-wysiwyg-editor
    no image picker


Notes 2005-Sep-05 - rest of this is from 2004.

Some recent developments in this space:
  Xinha http://xinha.python-hosting.com/
     a fork from htmlArea, bsd-style license
     plugin list: http://xinha.python-hosting.com/wiki/Plugins
     has "Stylist" plugin for CSS, and "ImageManager" for images (php)
     no safari support
  AreaEdit http://www.formvista.com/otherprojects/areaedit.html
     a fork of Xinha 
  RTE http://www.kevinroth.com/rte/demo.htm
    public domain. simple.
  TinyRTE http://www.alfmiti.net/demo/tinyRTE_demo.htm and http://wakka.xiffy.nl/WYSIWYGrte
     bsd license. originally a fork of RTE, now mostly new code.
     uses a fork of the Zhuo image manager, which is pretty good
  TinyMCE http://tinymce.moxiecode.com/
     LGPL; wants to sell MCImageManager and MCFileManager
     supports Safari
     going to be integrated with wordpress: http://photomatt.net/2005/08/05/wysi/
     which links to some free plugins: http://codex.wordpress.org/Plugins/Images
     there is also a Mambo plugin for TinyMCE: http://www.cellardoor.za.net/mosce/
     there are quite a few WP image plugins:
	http://www.steffensenfamily.com/g2ic_plugin/
	http://www.bistr-o-mathik.org/code/wordpress-plugins/
	http://fredfred.net/skriker/index.php/iimage-browser
  WidgEditor http://www.themaninblue.com/experiment/widgEditor/
     GPL
  FCKeditor
     author is back from travels
     there is a plugin for WordPress called ChenPress: http://www.pixelficker.com/chenpress-wysiwyg-for-wordpress/
     fckeditor has a small tabbed image popup with another big "browse server" popup from there

Some useful comments on FCKEditor: http://www.phpsolvent.com/wordpress/?page_id=330 

A good article on Kupu that actually makes it possible to install: http://www.onlamp.com/pub/a/onlamp/2005/04/28/kupu.html
with associated scripts at http://www.craic.com/oreilly/kupu/

contenteditable/designMode HTML Editing

htmlarea was my choice for the last web site I built where
I needed a mini-CMS.

The other two I looked at (among the free choices) were fckeditor and kupu. 
fckeditor looked good, but the main author just made an
announcement that he is going walkies for a few months.
kupu was just too much of a bear to install and integrate with.
(I could be nice and say "oh, it must be for the 'enterprise'",
but i won't.)

All three (htmlarea, fckeditor, kupu) uses contentEditable on
IE and designMode in Gecko.

For those keeping track, designMode (aka "Midas") was the
Mozilla project's first generation of incompatible editing
support: 
   http://www.mozilla.org/editor/midas-spec.html
It is like IE's designmode, except different of course:
   http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/designmode.asp
It works at the whole document level, and so basically requires
the edited content to be put in an iframe.

Mozilla's second generation of incompatible editing support
was Mozile (CSS -moz-user-modify): 
   http://mozile.mozdev.org/
It is kind of like contentEditable, except different of course:
   http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/contenteditable.asp
Mozile is not used by the above ttw editors.
(Epoz is also the same, using IE contentEditable and Gecko Midas; Kupu
has largely eclipsed Epoz.)

The ugly part of this technology foundation is that they
require dealing with the browser's internal HTML DOM model
of the document -- basically what you get if you ask for an
element's innerHTML.
The discrepency from the original source is further with IE,
but Gecko has issues too; it keeps sticking in p tags
where I don't want them, for example; and it injects
implicit tbody elements.
(Epoz goes as far as using xml-rpc to a server-side
tidy process to clean up the mess made by the browser.)

XML Editing


There are some Gecko-specific ttw editors that use
Mozile and therefore are capable of XML, XHTML, and
the radical concept of preserving the original source --
WYTIWYG (what you type is what you get).
Editors using mozile include bitflux, xul editor, and RPad.
In addition to being browser-specific, these are currently
ugly, hard to use, and lack features.

Another approach to supporting arbitrary xml is to use
client-side xslt or other client-side xml apis, to transform
the original into some editable xhtml fragments.
These still rely on the browser's native contentEditable
equivalent, but because they transform too and from
xml in small chunks, the messes of innerHTML are less of
a problem. Some that do this are Xopus and Microsoft's
demo application:
  http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnxmlweb/html/xmldocedit.asp
Xopus worked on Gecko before it went closed source;
now it is IE-only. 

The importance of XML-based editing is that it can be schema driven, and
that is useful even for just XHTML, where you may want to control what
elements and attributes are used. You may want to have a menu of elements, etc.

Non-Web Technologies


There are a variety of other client-side editors that
rely on java (e.g. Campfire, ActivEdit, Ekit), activex (e.g. xstandard),
or flash (e.g. eWebWP). They avoid the reliance on the builtin
browser editing facility, exchanging that for
the consequences of their own technology base: java
takes out the browser; activex is windows-specific; and
flash has limitations in its builtin html support
(so I've heard, anyway it is otherwise hard to understand
why eWebWP would be Ekton's entry-level product).

Of course, if your content is directly available via webdav/ftp, then at least some
users can perform updates via a "native" html editor.
You'd still have to deal with the fragment vs. document problem.

Who is Using What


Typepad has announced "rich text editing":
   http://typepad.com/resources/2004/11/rich_text_editi.html
They are using a hacked htmlarea v3:
   https://www.typepad.com/app-static/js/htmlarea.js

Yahoo Mail has a "rich text editor" available for composing messages.
It is Window/IE-only. It appears to be homegrown.
It does not use contentEditable, but just TextRange objects.

Hotmail has a browser-based html editor that runs only on Windows. 
It relies on an iframe. Like Yahoo, it is limited in features; toggling
into plain text loses all formatting, and there is no support for images.

Link Farms


There are several good link farms about ttw editors,
including:
  http://www.cmsreview.com/WYSIWYG/
  http://www.geniisoft.com/showcase.nsf/WebEditors
     (was: http://www.bris.ac.uk/is/projects/cms/ttw/ttw.html)