浏览器与insertUnorderedList的差异

时间:2013-07-24 18:08:09

标签: javascript html5 wysiwyg contenteditable

因此,我尝试使用内容可编辑的div和document.execCommand来提供与WYSIWYG编辑器近似的内容。它在Chrome中运行良好。但是,在IE中,insertUnorderedListinsertOrderedList命令表现不佳。具体来说,如果它在一个空行上,它只是取消,而不是像在Chrome中那样插入项目符号(或编号)列表。如果您突出显示某个部分,则会选择“一切”,然后设置项目符号(或编号)列表,而不是仅将选择设置为列表。

HTML:

<div id="editable" contenteditable="true">Test<br/>Test</div>
<div class="buttons">
<button onclick="insertUnordered();">Unordered List</button>
<button onclick="insertOrdered();">Ordered List</button>
</div>

代码:

function insertUnordered() {
    document.execCommand("insertUnorderedList");
}

function insertOrdered() {
    document.execCommand("insertOrderedList");
}

我也有这个jsfiddle设置:http://jsfiddle.net/sbazp/1/如果你看看IE和Chrome,你可以看到我在说什么。 (在按钮执行任何操作之前,您需要先单击可编辑区域。)

有没有简单的方法可以解决这个问题,还是应该选择一些WYSIWYG插件?

1 个答案:

答案 0 :(得分:1)

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript">

function insertUnordered() {
    document.execCommand("insertUnorderedList");
}

function insertOrdered() {
    document.execCommand("insertOrderedList");
}


</script>


</head>

<body>
  <div contenteditable="true"><ol><li>Foo</li><li>sadasda</li><li>asd</li><li>asd</li><li>asd</li></ol></div>
<div class="buttons">
<button onclick="insertUnordered();">Unordered List</button>
<button onclick="insertOrdered();">Ordered List</button>
</div>

</body></html>