Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
573 views
in Technique[技术] by (71.8m points)

javascript - 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,

  1. just save it to a file,
  2. then open it in IE
  3. enable jscript when asked
  4. push the button
  5. 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.

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...