Javascript：获取内容中的文本可编辑到插入符号

Question

我很惊讶我遇到了这个问题并且无法找到答案。 我正在尝试从 contenteditable 的开头到用户光标/插入符号获取 contenteditable 中的文本。

这是我尝试过的 jsFiddle （单击 contenteditable 并观看 console.log）。

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

我尝试使用 contenteditable 的textContent ，但如果有像foo\r\nbar foo<br>bar这样的内容，它会在理想情况下输出foobar内容可编辑）。

innerText按预期工作，输出foo\r\nbar ，但正如在jsFiddle中看到的那样，一旦 contenteditable 中的 html 变得有点复杂，插入符号 position 似乎与innerText中的位置不匹配，并且我无法输出到插入符号.

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

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

只是在寻找方向，关于我应该尝试什么的任何快速提示？

Answer 1

在您的小提琴中，我将 JavaScript 内容替换为：

document.querySelector("#edit").addEventListener("click", function(){
  var target = document.querySelector('#edit');
  var sel = document.getSelection();
  if(!sel.toString()) {
    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);
  }
});

希望这可以帮助。

编辑：既然你说

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

我以为click事件只是一个例子； 在用户键入时获取文本意味着：

1. 入口点不能是click事件，但可能是setInterval function
2. 用户输入时没有选择，只有插入符号

解决报告的错误就足以像我一样更改代码，无论如何这只是获得您感兴趣的结果的示例； 比您必须努力实现真实场景的所有可能情况所需的行为。