Javascript 为什么ContentEditable正在删除“；ID”；来自div_Javascript_Html_Internet Explorer_Internet Explorer 6

Javascript 为什么ContentEditable正在删除“；ID”；来自div

javascript html internet-explorer

Javascript 为什么ContentEditable正在删除“；ID”；来自div,javascript,html,internet-explorer,internet-explorer-6,Javascript,Html,Internet Explorer,Internet Explorer 6,我在使用HTML编辑器时遇到问题。我们使用“contentEditable”来实现它，但是，当任何段落格式选项在没有选择内容的情况下完成时，即从页面中的一个div中删除ID 这个问题在HTML中重复出现只需将其保存到文件中然后在IE中打开它请求时启用jscript 按下按钮检查是否有两个消息框第一个是“MainContents=object” 第二个是“MainContents=NULL” 我正在使用IE 6.0.2900.5512和XP SP3 这对你来说是否重复？ <htm

我在使用HTML编辑器时遇到问题。我们使用“contentEditable”来实现它，但是，当任何段落格式选项在没有选择内容的情况下完成时，即从页面中的一个div中删除ID

这个问题在HTML中重复出现

只需将其保存到文件中

然后在IE中打开它

请求时启用jscript

按下按钮

检查是否有两个消息框

第一个是“MainContents=object”

第二个是“MainContents=NULL”

我正在使用IE 6.0.2900.5512和XP SP3

这对你来说是否重复？

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

发生了什么事？

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


推我
document.getElementById（“EDITBOX”）.focus（）；

背景我在一家向公司销售软件的ISV工作，目前我们所有的客户都使用IE，没有市场需要支持其他浏览器。我被告知使用contentEditable实现一个HTML编辑器。所有格式选项都基于document.execCommand（），例如document.execCommand（“粗体”）

由于许可限制（不喜欢LGPL）和/或成本，使用第三方HTML编辑器很难获得批准。我们花了很长时间才被允许使用jquery

当用户没有选择任何项目时，我让编辑器在不使用段落格式命令的情况下工作。我发布的HTML是为了重现我遇到的问题而编写的一小部分HTML

另见和

ID区分大小写。请尝试MAINCONTENTS而不是MAINCONTENTS。

ID区分大小写。尝试MAINCONTENTS而不是MAINCONTENTS。

第一个问题，正如所指出的，是case中的不一致性，尽管它不会影响IE，因为explorer getElementById违反了W3规范，并且不区分大小写

将exec命令更改为：

document.execCommand（“insertOrderedList”，true，”

似乎成为了这两个警报的对象，并且使代码在firefox中工作得更好（这根本不起作用）

我想我的第一个问题是，您真的需要使用execCommand来执行此操作吗？我知道您可能正在尝试做的不仅仅是插入一个有序列表，但我想冒昧地猜测，实现您试图用DOM做的事情可能是一种更干净的方法

我在这个回复中添加了一个编辑，因为我越多地使用您的测试代码，我的结果就变得越不一致。我第一次在不同的浏览器中运行它时会得到不同的结果，在运行几次并重新启动浏览器后会得到不同的结果。老实说，在进行javascript开发时，这正是您非常希望避免的事情，所以我将重申我最初的问题。你真的需要使用这种技巧来实现你的目标吗。有更好、更简单的方法来插入DOM。

第一个问题，正如所指出的，是案例中的不一致性，尽管它不会影响IE，因为explorer getElementById违反W3规范，并且不区分大小写

将exec命令更改为：

document.execCommand（“insertOrderedList”，true，”

似乎成为了这两个警报的对象，并且使代码在firefox中工作得更好（这根本不起作用）

试试这个

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


函数addToList（文本）{
var list=document.getElementById（'list'）；
list.innerHTML+=''+text+''；
}
推我

以上内容在大多数浏览器中都会给出可靠的结果。我已经在FF3和IE6中测试了上述内容。

试试这个

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


函数addToList（文本）{
var list=document.getElementById（'list'）；
list.innerHTML+=''+text+''；
}
推我

以上内容在大多数浏览器中都会给出可靠的结果。我已经在FF3和IE6中测试了上述内容。

感谢大家的帮助，任何想使用“contentEditable”的人都应该阅读我问题的其他答案，然后在使用“contentEditable”之前仔细思考

我发现如果我使用iframe，例如

<iframe id=EditorIFrame >
</iframe>

并创建可在iframe中编辑的div

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

theEditorIFrame=document.getElementById（'EditorIFrame'）；
theEditorDoc=TheEditorFrame.contentWindow.document；
theEditorDoc.body.innerHTML=''；
theEditorDiv=theEditorDoc.getElementById（“编辑框”）
theEditorDiv.focus（）；
editordoc.execCommand（“InsertOrderedList”）

目前，这一切似乎都对我有效，直到我从“contentEditable”和“execCommand”中得到下一个令人讨厌的惊喜

Ps我如何让我的代码的第一行与其他行一起排列？

感谢大家的帮助，任何想使用“contentEditable”的人都应该阅读我问题的其他答案，然后在使用“contentEditable”之前仔细思考

我发现如果我使用iframe，例如

<iframe id=EditorIFrame >
</iframe>

并创建可在中编辑的div