Aloha Editor

Aloha Editor Guides

These guides help you to make your content editable and to develop Aloha Editor.

DOM to XHTML Plugin

The dom-to-xhtml plugin provides a more XHTML conformant serialization than element.innerHTML for editable.getContents().

1 Overview

The internal serializer walks a DOM tree and generates a XML fragment of the tree that doesn’t violate the basic well-formedness rules of attribute values must be quoted and elements must be closed.

The plugin tries to make the result XHTML and HTML comformant:

  • element and attribute names are lowercased,
  • certain elements are serialized as self-closing tags without an end tag (<br/>, <img/>),
  • boolean attributes that are true are serialized like checked=“checked”

Please find the list of elements that are serialized as self-closed and the list of boolean attributes in the source code (see vars emptyElements and booleanAttrs)

Also, empty attributes (for example value="") will not be serialized at all (will not appear in the serialization). There is not yet a definite reason for this, so it may be changed at some time.

The result may still violate HTML or XHTML schemas because all elements and attributes in the DOM are serialized the way they are encountered, regardless of whether they are correctly nested or are valid according to a schema.

2 Usage

It suffices to include the dom-to-xhtml plugin in the plugin list of the Aloha-Editor script tag.

When the plugin is initialized, it will automatically replace the default editable serializer, which has the effect that calls to editable.getContents() return a valid XML fragment.

The serialization functions can also be used directly, for example:


    Aloha.require(['dom-to-xhtml/dom-to-xhtml'], function(DomToXhtml) {	
        DomToXhtml.contentsToXhtml(elementNode);
        DomToXhtml.nodeToXhtml(anyDomNode);
    });

3 Configuration

To


	Aloha.settings.plugins: {
		'dom-to-xhtml': {
			config: [ 'dom-to-xhtml' ],
			editables: {
				'#one': [ 'dom-to-xhtml' ],
				'#two': [ ]
			}
		}
	}

4 Known Issues

There are some known issues especially with Internet Explorer. These issues are documented more in detail in the source code. Some best practices to avoid these issues:

  • IE – don’t use newer HTML elements on older Internet Explorer versions,
  • IE – don’t use namespaces,
  • IE – if you have to use namespaces, don’t use default namespaces, only prefixes, and make prefixes and element and attribute names all lowercase, and don’t use any title elements, or similar HTML elements that can’t validly appear in the body of a HTML document, not even in a non-HTML namespace,
  • IE – don’t expect whitespace to be preserved correctly except in <pre> elements,
  • IE – but don’t use white-space:pre CSS styles (and similar whitespace modifying styles), or expect whitespace to sometimes be preserved and sometimes not,
  • IE7 only – expect URLs in href and src attributes to be turned into absolute URLs,
  • all browsers – don’t expect comments, conditional comments, processing instructions or CDATA sections to be preserved correctly.