Browser Based Editor Library HTML Editor

From W3C Wiki

This is part of a project on an open source Browser_Based_Editing_Library, which is intended for use in creating a variety of browser based editors for different kinds of tasks, e.g. regular web pages, minutes, specs, slide presentations, and integration with content management systems, etc.

A generic HTML5 editor is being developed as an example of what is possible. The editor test bed is still at an early stage of development and the following links to a snapshot that will be updated as work proceeds.

This is being designed to work with all modern browsers including Safari, Chrome, Firefox and Internet Explorer. If you are interested in helping with this in any way, please contact Dave Raggett <dsr@w3.org>

User Interface Design

Here is an early screen shot:

Note the following is still being implemented:

  • The information icon on the left will allow you to edit the document title, the document language, and the script and style sheets used by the document.
  • The document icon is for opening existing documents, or for creating new documents, possibly by copying existing ones. It will also be possible to supply the path for the document to be edited as part of the editor's URL
  • The Diskette icon is for saving the document to the server, possibly under a new path.
  • The undo and redo icons - this will highlight when the corresponding actions are available.

The paragraph drop down is for changing the current block. The choices include: paragraph, heading level 1 through 6, list item, term name, term definition, section, blockquote, address, preformatted and div. When applying 'section' or 'div' to a selection including multiple blocks, the selected blocks are wrapped with the new element.

  • The next 4 icons allow you to switch between bullet and numbered lists, and to manage nested lists through indent and outdent.
  • The B and I icons highlight for strong and weak emphasis and behave just like most word processors.
  • The </> icon opens a dialog that allows you to insert a wide variety of HTML5 inline markup, including form fields.
  • The CSS icon opens a dialog for inspecting and editing styles. This will be handled as a separate module due to the open ended nature of this task.
  • The next two icons cover hypertext links and images respectively.
  • The drop down list on the right hand allows you to insert and modify tables with support for inserting and deleting rows and columns, merging cells, etc.

Under the toolbar, you can see the nesting of elements at the current editing point. The aim is to allow you to click an element to edit its attributes, to delete the element or to replace it with another compatible element, or even to wrap it with a new element like section.

Work Arounds

The example editor loads the document into an iframe with designMode. The HTML5 sandbox attribute is used along with the allow-same-origin and allow-scripts attributes. This allows the editor to manipulate the iframe document's DOM when the document is loaded from the same Internet domain.

To enable the editor to work with IE9, the designMode property is set before loading the DOM via document.write with the text obtained from XHR. The DOM insertBefore method failed when the 3rd argument is undefined, so a check was added to coerce that to null. I have work arounds for earlier versions of IE that don't support window.getSelection or addEventListener, but don't have anything to test them with. There are some browser tweaks for styling in "editor.css" which could do with some refinement, e.g. for IE9 which won't let you set a background image for select elements.