Best IT Recipes

Why ContentEditable removes "ID" from div

I'm having trouble working with the HTML editor. We use "contentEditable" to implement it, however, when the paragraph formatting option is executed without the selected content, IE removes the identifier from one of the divs on the page.

The problem is repeating for me with HTML,

  • just save it to a file,
  • then open it in IE
  • enable jscript on request
  • press the button
  • check for two message boxes
    1. the first one says "MainContents = object"
    2. the second says "MainContents = NULL"

I am using IE 6.0.2900.5512 with XP SP3

And is this repeated for you?

What's happening?

<html> <head> </head> <body id="BODY"> <div contentEditable="true" id="EDITBOX"> </div> <div id="MAINCONTENTS" unselectable="on"> <button title="Ordered List" unselectable="on" onclick='alert("MainContents = " + document.getElementById("MAINCONTENTS")); document.execCommand("InsertOrderedList"); alert("MainContents = " + document.getElementById("MAINCONTENTS")); '> Push Me </button> </div> </body> </html> <script type="text/javascript"> document.getElementById("EDITBOX").focus(); </script>


Background I work for an ISV that sells software to corporations, all of our customers currently use IE, and there is no market dependence for supporting other browsers. I was asked to implement an HTML editor using contentEditable. All formatting options are based on document.execCommand (), for example. document.execCommand ("bold");

Due to licensing restrictions (LGPL is not pleasant) and / or cost it is very difficult to get permission to use a third-party HTML editor. It took us a while to register to allow jquery.

I have an editor that works separately from the case of the paragraph formatting command when the user does not have the selected items. The HTML I posted is a small piece of HTML that I wrote in order to reproduce the problem I encountered.

see also http://www.maconstateit.net/tutorials/JSDHTML/JSDHTML12/jsdhtml12-02.htm and the Danger of using contentEditable in IE

+1
javascript html internet-explorer internet-explorer-6
Feb 09 '09 at 11:59
source share
4 answers

Thanks for helping everyone, someone thinking of using "contentEditable" should read the other answers to my question and then think very hard before using "contentEditable".

I found that if I use an iframe, for example,

 <iframe id=EditorIFrame > </iframe>

And create a div that can be edited in an iframe, e.g.

 theEditorIFrame = document.getElementById('EditorIFrame'); theEditorDoc = theEditorIFrame.contentWindow.document; theEditorDoc.body.innerHTML = '<body><div contentEditable="true" id="EDITBOX"></div></body>'; theEditorDiv = theEditorDoc.getElementById("EDITBOX") theEditorDiv.focus(); theEditorDoc.execCommand("InsertOrderedList")

Everything seems to work for me until I get the next nasty surprise from "contentEditable" and "execCommand"

Ps How do I get the first line of my code in line with the rest?

+1
Feb 09 '09 at 14:07
source share

The first problem, as Gary noted, is inconsistency in the event that this does not affect IE, since explorer getElementById goes against W3 specifications and is not case sensitive.

Modifying the exec command: document.execCommand("insertOrderedList",true,""); seems to receive objects for both warnings, and also makes the code a little better in firefox (which doesn't work at all).

I assume that my first question will be, do you really need to do this with execCommand? I know that you are probably trying to do more than just insert an ordered list, but I would venture to suggest that implementing what you are trying to do with the DOM would probably be a cleaner way to do this.

I am adding editing to this answer because the more I play with your test code, the more inconsistent my results become. I get different results the first time I launch it in different browsers, and get different results after it starts several times, and then restart the browser. To be completely honest, this is exactly the material that you desperately want to avoid when developing javascript, so I will repeat my original question. You really need to use this technique to achieve your goals. There are simpler and easier ways to insert into the DOM.

+2
Feb 09 '09 at 12:34
source share

Try it;

 <html> <head> <title></title> <script type="text/javascript"> function addToList(text) { var list = document.getElementById('list'); list.innerHTML += '<li>'+text+'</li>'; } </script> </head> <body> <div contentEditable="true" id="editBox" style="width: 300px; height: 100px; border:1px solid #ff0000;"> </div> <ol id="list"></ol> <button title="Ordered List" unselectable="on" onclick="addToList(document.getElementById('editBox').innerHTML)">Push me</button> </body> </html>

The above should give reliable results in most browsers. I tested above in FF3 and IE6.

+1
Feb 09 '09 at 13:14
source share

Identifiers are case sensitive. Try MAINCONTENTS instead of MainContents.

0
Feb 09 '09 at 12:20
source share


More articles:


All Articles