如何在 contenteditable div 中的特定位置添加/插入/更新文本？

在 contenteditable div 中的特定位置添加/插入/更新文本的方法有很多种，以下是一些常用的方法：

使用 innerHTML

通过使用 innerHTML，可以在 contenteditable div 中直接插入 HTML 代码。例如：

<div id="content" contenteditable="true">
  <p>Hello, world!</p>
</div>

<script>
  var content = document.getElementById("content");
  content.innerHTML = "<p>Hello, world!</p>";
</script>

这种方法比较简单，但是存在一些安全隐患，例如容易受到 XSS 攻击等。

使用 textContent

textContent 属性是 contenteditable 元素的一个只读属性，表示元素的文本内容，不包括 HTML 标记。可以使用 textContent 来插入文本。例如：

<div id="content" contenteditable="true">
  <p>Hello, world!</p>
</div>

<script>
  var content = document.getElementById("content");
  content.textContent = "Hello, world!";
</script>

这种方法比 innerHTML 更安全，但是插入的文本不会包含 HTML 标记。

使用 createTextRange

createTextRange 方法可以创建一个文本选区，可以使用 select 方法来插入文本。例如：

<div id="content" contenteditable="true">
  <p>Hello, world!</p>
</div>

<script>
  var content = document.getElementById("content");
  var range = document.createRange();
  range.selectNodeContents(content);
  range.collapse(false);
  var selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  content.focus();
</script>

这种方法可以在 contenteditable div 中插入文本，并且可以插入多行文本。

以上是一些常用的方法，当然还有其他的方法可以插入文本，具体可以根据实际情况选择。需要注意的是，在插入文本之前，需要先选择要插入的位置，可以使用 select 方法来选择。另外，在插入文本之后，需要将文本设置为 focus 状态，以便用户可以编辑。