Jump to content

Content Editable


blufish
 Share

Recommended Posts

I have this content editable div which is working fine, but when I type in HTML code, it doesn't work. How do you make it so it execute HTML code?

<div name=contents CONTENTEDITABLE="true" STYLE="border: 5px dashed black; width:90%; height: 90%;"></div>

I tried this where I tried to use Javascript to turn off the contenteditable value but it doesn't work, I would like it so it would execute HTML code immediatley when it is typed in, and then I can change it with a button to show the code and stuff.

<html><head><title>Edit your page!</title><script type="text/javascript">function change(){document.contents.contenteditable="false";}</script></head><body><input type="button" onclick="change()" value="Change"><div name=contents CONTENTEDITABLE="true" STYLE="border: 5px dashed black; width:90%; height: 90%;"></div></body></html>

Thanks in advance!

Link to comment
Share on other sites

You are describing an IE attribute with limited support in other browsers. (EDIT: See Post #4.) But even in IE, what you're describing doesn't happen automatically. You have to make stuff happen. Check out the source code here just to get an idea what's involved. http://www.lestercat.net/dev/editable/editableFULL.html But be aware that parts of it won't translate into other browsers and would have to be adapted, if in fact that's possible. (EDIT: It's actually quite possible.)

Link to comment
Share on other sites

On closer examination, I find excellent support for this and the associated execCommand() method (also IE proprietary) in FF 3, Safari 3, and Opera 9.5 (all Mac versions, but I assume Wintel also). I'm quite surprised and excited about the possibilities, especially when combined with AJAX, for things collaborative document editing. The exact implementation varies (see this by alerting innerHTML after you've made a formatting change) but the commands all work, one way or another. I mean Bold(), Italic(), Underline(), FontSize(), and maybe more.So: excellent text support.Image support varies wildly, with only Safari giving you what you'd expect when you drag an image into the editable area. (It actually creates an image tag with the original address.) FF creates an image tag with a temp address on client harddrive (not too useful). Opera seems not to register that anything has happened, so poop on that.Entering HTML generates entities instead of true tags, but that could easily be cleaned up with javascript, on the spot, or PHP if you were posting the results someplace. You'll want a regex for this kind of task, a little more challenging but still quite do-able.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...