Post Archive

› May 28, 2002

Content Editable

  • Reported by Nate

Lon from Q42 writes:
We have “released” the code for the contenteditable feature for Mozilla as part of the Xopus open source project.
It's very easy to use. You just have to say:
<div contenteditable=true>you can edit this</div>
or by script of course:
document.getElementById(“someID”).contentEditable = true;

Comments

1. May 28, 2002 04:31 PM

Quote this comment

Andyed Posted…

They’re using XBL (http://www.mozilla.org/projects/xbl) to make this happen. XBL’s Mozilla’s answer to IE’s htc files. It’s quite handy. I use it to make my blog entries collapsible over at surfmind and the svg graphs project, linked to my name, uses it to parse a custom graphing tag set. So the Q42 case is a great example of what XBL is meant for — extending the available tagset. Their implementation is quite nifty, though they had to use Mozilla specific CSS to hide the text input frame (this.style.MozOutline = “none”;).

2. May 28, 2002 04:48 PM

Quote this comment

Simon Posted…

That’s pretty neat, unfortunately the code isn’t quite good enough for deploying anywhere–I had problems with hitting enter only working sometimes, and once or twice the editable region just locked up on my and wouldn’t let me edit it further at all. Still, it’s a very nice demo and I’m sure with a bit of hacking around it could become very useful. Looks like time to start learning XUL :)

3. May 29, 2002 05:27 AM

Quote this comment

Sjoerd Posted…

Andyed: We specifically used Mozilla specific CSS for the indicator, because outlines don’t disrupt the layout. And Mozilla’s outlines support the ‘invert’ color, so it’s visible on any background. It is not used for contenteditable, only for indicateeditable. Simon: We hope you (and others) will indeed hack around to improve the contenteditable feature. You don’t need to learn XUL, it’s not used. You don’t even have to learn XBL; what is needed is already in place. What you need is some up-to-date javascript and DOM knowledge to improve the keypress handler.

4. November 11, 2002 09:22 AM

Quote this comment

Alexander Posted…

I liked the idea from Q42 very much and tried to improve the keypress handling. I didn’t get very far though. It starts, when you select a range over several nodes and then want to do somehow format (or delete/overwrite) that; You will need rather clever code to do the DOM manipulations here. Has anyone improved the code on Xophus’ website? Also I just cannot make contenteditable work on a webserver, even if it works locally. The online demo on xophus’ website works though... Is there a special requirement for the location of the xbl files? I can contribute the idea to extend the document object with the microsoft execCommand method, so you can write crossbrowser editors sharing all code except for a small mozilla javascript library. I can send my implementation to interested people.