为什么ContentEditable从div中删除“ID” [英] Why is ContentEditable removing “ID” from div
问题描述
我在使HTML编辑器工作时遇到问题。我们使用contentEditable来实现它，但是当任何段落格式化选项没有选择内容时，IE会从页面中的一个div中删除该ID。
这个问题重复了我的HTML，
- 只是将它保存到一个文件中，然后
- 然后在IE浏览器打开它
- 在询问时启用jscript
- 按下按钮
- 检查两个消息框
- 第一个表示MainContents = object
- 第二个表示MainContents = NULL
我在使用IE 6.0.2900.5512和XP SP3 $ / b
$ b
所以这种说法对您来说重复吗？ 发生了什么事？
< html>
< head>
< / head>
< body id =BODY>
< div contentEditable =trueid =EDITBOX>
< / div>
< div id =MAINCONTENTSunselectable =on>
< button title =Ordered Listunselectable =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>
背景
我为一家向企业出售软件的独立软件开发商工作，目前我们所有的客户都使用IE，并且没有市场依赖来支持其他浏览器。我被告知使用contentEditable实现一个HTML编辑器。所有格式化选项都基于document.execCommand（），例如， document.execCommand（bold）;
由于许可限制（LGPL不被喜欢）和/或成本很难获得批准使用第三方HTML编辑器。我们花了一段时间才被允许使用jQuery。
当用户没有任何项目时，编辑器的工作方式与段落格式化命令不同选择。我发布的HTML是我写的一小段HTML文件，用于重现我遇到的问题。
另见 http://www.maconstateit.net/tutorials/JSDHTML/JSDHTML12/jsdhtml12-02.htm and
在IE中使用contentEditable的风险
感谢大家的帮助，任何想使用contentEditable的人都应该阅读我的问题的其他答案，然后在使用之前仔细考虑 contentEditable。
我发现如果我使用iframe，例如
< iframe id = EditorIFrame>
< / iframe>
然后创建可在iframe中编辑的div例如
theEditorIFrame = document.getElementById（'EditorIFrame'）;
theEditorDoc = theEditorIFrame.contentWindow.document;
theEditorDoc.body.innerHTML ='< body>< div contentEditable =trueid =EDITBOX>< / div>< / body>';
theEditorDiv = theEditorDoc.getElementById（EDITBOX）
theEditorDiv.focus（）;
theEditorDoc.execCommand（InsertOrderedList）
似乎所有的工作对我来说，目前直到我从contentEditable和execCommand中获得下一个令人吃惊的惊喜
Ps我如何获得我的代码的第一行与其余的阵容？
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?
<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
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?
这篇关于为什么ContentEditable从div中删除“ID”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
