gpt4 book ai didi

javascript - 浏览器与 insertUnorderedList 的差异

转载 作者:可可西里 更新时间:2023-11-01 14:51:45 26 4
gpt4 key购买 nike

因此,我尝试将内容可编辑的 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,您就会明白我在说什么。 (在按钮执行任何操作之前,您需要先单击可编辑区域)。

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

最佳答案

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

关于javascript - 浏览器与 insertUnorderedList 的差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17841631/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com