Through-The-Web (TTW) Editors

Mark D. Anderson (mda@discerning.com)
Created 2004 Nov 15
Notes added 2007-May-15
  Issues to consider:
    Safari/Opera support
    separates block and span formatting
    Indent as blockquote
    Handles attempts at overlapping b and i
    Return is 

Generates XHTML image popup dialog: simple or complex; can style with class 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 (allows change fonts, etc.) FCKEditor has improved MCPUK ImageManager http://fckeditor.prosjektweb.net/ It does have a style plugin, but not a good way to distinguish span vs. block styles (not as good as Xinha Stylist or tinymce in this respect) No way to easily configure it with buttons to insert templates (vs. popup dialog) Undo/redo seems not to work. 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 Most editors still don't support Safari or Opera. Xinha doesn't. FCKEditor has a good list of outstanding issues: http://dev.fckeditor.net/milestone/Opera%20Compatibility http://dev.fckeditor.net/milestone/Safari%20Compatibility TinyMCE reports partial working: http://wiki.moxiecode.com/index.php/TinyMCE:Compatiblity 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, sort of 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 LGPL 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)