The Craziest DHTML Hack Ever
Hi, my name is Mark Wubben and for the past six months I've been working on the craziest DHTML hack ever. Now, to be fair, that's not six months full time, so perhaps not as crazy. And I only really got started this summer, so let's make it eight weeks.
What the hack is? A DHTML driven caret for text editing.
You might be thinking: what the heck? Well, that's what I thought when I set out all those months ago. Here's the deal, all web apps providing rich text editing use content editable. Content editable, however, is pretty much broken, most especially in IE. For example, the undo history is unusable. But most importantly, IE doesn't support much CSS when it's in content editable mode. Xopus has evolved to the point where the only reason to use content editable is to move the caret. However, as it's a WYSIWYG editor, we want to be able to use a *lot* of CSS.
Hence, content editable had to go.
The basic idea of my Content Editable code is to use the browser native TextRange to represent the caret in the document. Then we get the coordinates of that range to draw the caret. I started out using an early attempt of Sjoerd, which simply moved the range and tried to make up for errors. For example, all content from the XML document ends up in textNode elements in the HTML document. The caret should only be in these textNode elements, and not in a paragraph. This approach failed. The next idea was to model the lines in document, and for each line maintain the previous and next line. This would make it easier to move the range to the correct line. Using the getClientRects method in IE the lines could be found. Eventually, this too failed, and I realized I needed a more detailed model of the text. For brevity, let's call this model the Text Object Model, or TOM. Just like DOM.
The more detailed model consisted of contexts for the lines. Depending on the CSS an element would form a new context or be part of an existing context. A floated element for example is a new context, you can't just walk the caret to a floated element. I got pretty far using this approach, but of course it had to fail as well.
The final attempt was to make a very detailed model, including each textNode element in the document. This finally allowed me to build a working caret for both IE and Firefox 3 (Gran Paradiso). I've put up a Xopus build with my Content Editable code enabled, see the Simple Demo. Unfortunately Xopus doesn't work in Gran Paradiso yet – likely because of Firefox issues, but we haven't yet tracked them down - so the demo is IE only. The original, stand-alone code does work in Firefox though.
A lot of work remains to be done before this is useful for all our clients, but I'd say this demo is very promising!
- Developer Blog
- › The Craziest DHTML Hack Ever
And of course having a Javascript only implementation of a walking cursor paves the way for a cross browser contentEditable implementation.
I have used some bad dhtml editors for content management systems that I have built in the past and have always wanted to find or create a clean code generating editor like this. Glad to see someone has more initiative than I. :-)
http:/
Xopus could not start because: The XML document http://xopus.com/files/democe/examples/Simple/document.xmlis not valid.
Reason: #/schema[1]/element[position() = 5 and @name = 'paragraph']/complexType[1]/complexContent[1]/extension[1]Derived type and the base type must have the same content type.
Base type : 'inlineInsideType'
Derived type : ''
http:/
Firefox 3 not work and safari either.
any ideas?
Write a comment