4

因此，我尝试使用内容可编辑的 div 以及document.execCommand提供近似所见即所得编辑器的东西。它在 Chrome 中运行良好。然而，在 IE 中，insertUnorderedListandinsertOrderedList命令表现不佳。具体来说，如果它在空白行上，它只是不聚焦，而不是像在 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，您可以看到我在说什么。（在按钮执行任何操作之前，您需要先单击可编辑区域）。

有什么简单的方法可以解决这个问题，还是我应该去使用一些所见即所得的插件？

4

1 回答 1

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>
于 2016-08-09T17:05:34.980 回答