If you’ve ever wanted to do WYSIWYG editing of XML in a browser, I think you’re going to like the elegant solution I stumbled across. The idea actually culminated from reading Kurt Cagle’s excitement around XQuery in the Browser, and my desire to create a MLUC DemoJam entry that could excite publishers about my latest passion, HTML5. At first I thought XQuery in the Browser opened a new possibility to do simple browser-based WYSIWYG editing, but as I dug into it I found it was much simpler to do the XSLT in MarkLogic, with granular pointers attached to each editable XML node. This solution allows me to very simply and efficiently:
- Render XML to final HTML using existing XSLT
- only minor modifications are required to add “sourcePath” attributes to the HTML
- MarkLogic’s xdmp:path function makes it simple to get precise paths to the source XML content
- Allow WYSIWYG editing of the XML directly from the browser
- HTML5′s contentEditable attribute makes this simple
- Use very efficient AJAX calls for immediate update to the source XML document
- MarkLogic’s xdmp:node-replace allows pin-point updates of only the changed node
All this in less than 100 lines of code! The video below does better justice to what I’m talking about:
Please note that I’m not trying to demo a full-featured editor here. This is just a proof of concept. Obviously many features need to be added before this is usable. Nevertheless, this simple demo shows an approach that could enable many highly usable solutions for publishers.
About Sam Mefford
How do you handle attributes of the xml tags? If you want to make the attributes also editable via html.
Hello Simon, sorry for the delay. We’re trying to add captcha to the blog to deal with spam, so I can see real comments like yours faster.
While this solution doesn’t yet address attributes, I envisioned a set of menu options that would appear on right-click, similar to google docs. From there we could allow the user to edit attributes, add or remove elements, change the element name, etc.