Question

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

使用HTML重复问题

将其保存到文件
然后在IE中打开它
在询问时启用jscript
按下按钮
检查你有两个消息框
1. 第一个说“MainContents = object”
2. 第二个说“MainContents = NULL”

我正在使用带有XP SP3的IE 6.0.2900.5512

这样重复吗？

发生了什么事？

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

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

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

当用户没有选择任何项目时，我让编辑器与段落格式化命令的情况不同。我发布的HTML是我写的一小部分HTML，用来重现我遇到的问题。

另见http://www.maconstateit.net/tutorials/JSDHTML/JSDHTML12/jsdhtml12-02.htm和 Risk of using contentEditable in IE

Answer 1

第一个问题，正如Gary指出的那样，虽然它不会影响IE，因为它不会影响IE，因为资源管理器getElementById与W3规范不符并且不区分大小写。

将exec命令更改为： document.execCommand("insertOrderedList",true,"");似乎成为两个警报的对象，并且使代码在firefox中运行得更好（根本不起作用）。

我想我的第一个问题是，你真的需要使用execCommand吗？我知道你可能只是尝试做更多而不仅仅是插入一个有序列表，但我猜测实现你正在尝试用DOM做的事情可能是一种更清洁的方法。

我正在为此回复添加一个编辑，因为我使用的测试代码越多，我的结果就越不一致。我第一次在不同的浏览器中运行它时会得到不同的结果，运行几次然后重新启动浏览器后会得到不同的结果。说实话，这正是你在进行javascript开发时拼命想要避免的那种东西所以我会重申我最初的问题。您真的是否需要使用此技术来实现您的目标。有更好，更简单的方法可以插入DOM。

Answer 2

试试这个;

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

以上应该可以在大多数浏览器中提供可靠的结果。我在FF3和IE6中测试了上述内容。

Answer 3

感谢大家的帮助，任何想使用“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")

对我来说似乎一切顺利，直到我从“contentEditable”和“execCommand”获得下一个令人讨厌的惊喜

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

Answer 4

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

为什么ContentEditable从div中删除“ID”

4 个答案: