How-to guides‎ > ‎XForms View‎ > ‎

Customize the YUI RTE to edit custom xml

With Orbeon Forms 4 and newer, the solution described in this page is obsolete as the YUI RTE editor has been removed and replaced by another editor.

DISCLAIMER: This How-to is work in progress - don't expect the solution to be exhaustively tested.


Using the XForms Rich Text Control makes it easy to edit nodes containing XHTML data. This works fine as long as the content is (X)HTML, but to insert or edit non-HTML XML elements, some modifications are required. In this how-to, i'll try to describe a solution that enables the user to insert a custom XML element at any position in the rich text content. The custom element acts as cross-reference to any other content described by an numerical id (e.g.,paragraph numbers).


To process non-html XML elements using the YUI RTE in a orbeon app, the following three steps have to be done:
  1.  YUI RTE plugin: Add a plugin to the YUI RTE to provide a menu button that lets the user insert the custom element at cursor position;
  2. clean-html.xsl modification: add the custom element to the enumeration of valid html elements so it doesn't get stripped when updating the XForms model using the YUI RTE content;
  3. TagSoup modification: by default, the TagSoup lib is called to preprocess the content that's returned by the YUI RTE and remove unknown elements. To preserve our custom element, we'll have to tell TagSoup not to strip unknown elements.
Finally, We need some CSS rules to make the custom tag visible inside the YUI RTE editor pane.

1. YUI RTE plugin

ToDo: elaborate mailing-list threads, e.g.

Big problem: since firefox version 3.6.9, the insertHtml function doesn't allow inserting custom elements any more:

2. Modification of clean-html.xsl

clean-html.xsl is located in orbeon-resources-private.jar/ops/xforms - see XForms - Controls

3. Modification of regarding TagSoup and JTidy

a) TagSoup

Content submitted from the RTE to the XForms instance is passed to the TagSoup lib. By default, TagSoup removes "Bogons" (i.e. unknown elements, non-html elements). This behaviour depends on the setting of the feature. Up to now (September 2010), this feature is set to "true"; to change this, a modification of the TagSoup call in and a subsequent recompilation is required (see There's a patch waiting for review to make TagSoup and JTidy externally configurable.

b) JTidy

Instance data to be displayed by an xforms:output control with mediatype="text/html" is pre-processed by JTidy. By default, JTidy, doesn't accept non-HTML elements, and removes them. This applies to the "canvas" element, for example, that's still proprietary to mozilla(Gecko?)-based browsers. To change the Tidy config, again a modification of is required, as long as there's no possibility to configure Tidy by using a Java Properties file, for example (see the patch mentioned above).


To be done...