Javascript：以可编辑的方式获取文本，直到插入记号

Question

bounty到期在7天内。该问题的答案有资格获得+ 500声望赏金。 Sean Bannister希望引起更多关注对此问题：

只需寻找有关如何执行此操作的方向。

我很惊讶我遇到了麻烦，无法找到答案。我正在尝试从contenteditable的开始到用户的光标/插入符号以contenteditable的形式获取文本。

Here's a jsFiddle我所尝试的（单击contenteditable并观看console.log周围）。

我获得了插入符号的位置，然后尝试获取内容：

我尝试使用可编辑的contenteditable的textContent，但如果有类似foo<br>bar的内容，则它在理想情况下应输出foobar时输出foo\r\nbar（注意：这是针对chrome扩展名，我无法控制内容内容可编辑的）。

innerText可以像预期的那样输出foo\r\nbar，但可以在jsFiddle中看到，一旦contenteditable中的html变得有点复杂，插入符号的位置似乎与innerText中的位置不匹配，无法输出到插入符号。

[使用Range接口找到了一些代码，并对其进行了修改以满足我在this jsFiddle中的需要，但是<br>与textContent遇到了同样的问题。

注意：用户将在输入内容时继续输入内容，因此请寻找不会破坏此流程的内容。

只是寻找方向，我应该尝试的任何快速提示吗？

Answer 1

在your fiddle中，我将JavaScript内容替换为：

document.querySelector("#edit").addEventListener("click", function(){
  var target = document.querySelector('#edit');
  var sel = document.getSelection();
  var range = document.getSelection().getRangeAt(0);
  var container = range.startContainer;
  var offset = range.startOffset;
  range.setStart(target, 0);
  //do your stuff with sel.toString()
  console.log(sel.toString());
  //restore the range
  range.setStart(container, offset);
});

希望这会有所帮助。