blufish Posted August 8, 2008 Share Posted August 8, 2008 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 More sharing options...
jeffman Posted August 8, 2008 Share Posted August 8, 2008 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 More sharing options...
blufish Posted August 8, 2008 Author Share Posted August 8, 2008 The website you showed me doesn't come up?EDIT: just got it working. Link to comment Share on other sites More sharing options...
jeffman Posted August 8, 2008 Share Posted August 8, 2008 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.