Why is ContentEditable removing “ID” from div

I am having problems with getting a HTML editor working. We are using “contentEditable” to implement it, however when any paragraph formatting option is done without contents selected, IE removes the ID from one of the divs in the page.

The problem repeats for me with the HTML,

just save it to a file,
then open it in IE
enable jscript when asked
push the button
check you get two message boxes
1. first one says “MainContents = object”
2. second one says “MainContents = NULL”

I am using IE 6.0.2900.5512 with XP SP3

So does this repeat for you?

What is going on?

<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 sell software to corporations, at present all our customers use IE and there is no market depend to support other browsers. I have been told to implement an HTML editor using contentEditable. All the formatting options are based on document.execCommand(), e.g. document.execCommand(“bold”);

Due to licensing restrictions (LGPL is not liked) and/or cost it is very hard to get approval to use a 3rd party HTML editor. It took us a log time just to be allowed to use jquery.

I have the editor working apart from the case of paragraph formatting commands when the user does not have any items selected. The HTML I posted is a small bit of HTML I wrote to reproduce the problem I am having.

Steerpike

The first issue, as Gary pointed out is the inconsistency in case although it won't affect IE as explorer getElementById goes against W3 specs and is not case sensitive.

Changing the exec command to be: document.execCommand("insertOrderedList",true,""); seems to get be objects for both alerts and also makes the code work a bit better in firefox (which wasn't working at all).

I guess my first question would be, do you really need to do this using execCommand? I know you're probably trying to do more than just insert an ordered list, but I'd hazard a guess that implementing what you're trying to do with the DOM would likely be a cleaner way to do it.

I'm adding an edit to this reply, because the more I play with your test code the more inconsistent my results are becoming. I get different results the first time I run it in different browsers and I get different results after running it a few times and then restarting the browser. To be perfectly honest this is exactly the kind of stuff you desperately want to avoid when doing javascript development so I'll reiterate my initial question. Do you really need to use this technique to achieve your goals. There are better and easier ways to do insertion into the DOM.

Try this;

<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've tested the above in FF3 and IE6.

Thanks for everyone’s help, anyone thinking of using “contentEditable” should read the other answers to my question and then think very hard before using “contentEditable”.

I have found that if I use an iframe e.g.

<iframe id=EditorIFrame >
</iframe>

And create the div that is editable in the iframe eg

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")

It seems to all work for me, at present until I get the next nasty surprise from “contentEditable” and “execCommand”

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

IDs are case sensitive. Try MAINCONTENTS instead of MainContents.

来源：https://stackoverflow.com/questions/527866/why-is-contenteditable-removing-id-from-div

标签

javascript

html

internet-explorer

internet-explorer-6