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

Problem

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).

Solution

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. http://orbeon-forms-ops-users.24843.n4.nabble.com/YUI-RTE-Customisation-td1556372.html#none

Big problem: since firefox version 3.6.9, the insertHtml function doesn't allow inserting custom elements any more: https://bugzilla.mozilla.org/show_bug.cgi?id=596300

2. Modification of clean-html.xsl

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

3. Modification of XFormsUtils.java 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 http://www.ccil.org/~cowan/tagsoup/features/ignore-bogons feature. Up to now (September 2010), this feature is set to "true"; to change this, a modification of the TagSoup call in XFormsUtils.java and a subsequent recompilation is required (see http://orbeon-forms-ops-users.24843.n4.nabble.com/YUI-RTE-Customisation-td1556372.html#a1558753). 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 XFormsUtils.java 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).

Source

To be done...