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
- first one says “MainContents = object”
- 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?
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.
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.
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.