javascript - 如何将 javascript 中的 html 设置为元素中的特定位置

Question

我有一个像这样的div

<div contenteditable="true" >
 Hello this is content editable.... [cursor is blinking here] and more text
</div> 

如何设置光标闪烁的数据。

提前致谢。

Answer 1

您使用 execCommand使用 insertHTML 命令:

document.execCommand("insertHTML", false, "the HTML to insert");

实例:

$("div").on("keydown", function(e) {
  if (e.ctrlKey && e.which == 81) {
    document.execCommand("insertHTML", false, "<strong>inserted</strong>");
    return false;
  }
});

<p>Put your cursor in the relevant location below, then press Ctrl+Q:</p>
<div contenteditable="true">
 Hello this is content editable....  and more text
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

遗憾的是，这似乎不适用于 IE11。 :-|对于跨浏览器支持，您可以查看 Tim Down's rangy library .