javascript - 使用 contenteditable div 获取和设置光标位置

Question

我有一个 contenteditable div，我希望能够让用户插入链接、图像或 YouTube 视频等内容。目前这就是我所拥有的:

function addLink() {
  var link = $('#url').val();
  $('#editor').focus();
  document.execCommand('createLink', false, link);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Text Editor -->
<div id="editor" contenteditable="true"></div>

<!-- Add Link -->
<input type="text" id="url">
<button onclick="addLink()">Submit</button>

如您所见，用户必须在单独的文本框中输入链接地址。因此，当链接添加到编辑器时，它不会添加到指针/插入符号所在的位置。

我的问题是如何获取和设置指针/插入符号的位置。我已经看到其他问题，例如 this for setting the pointer但是我更希望有一个所有现代浏览器都支持的解决方案，包括 Chrome、Safari、Firefox 和 IE9+。

有什么想法吗？谢谢。

编辑:

我找到了下面获取位置的代码，但是它只根据它所在的行获取位置。例如，如果我有这个(| 是光标):

This is some text
And som|e more text

然后我将返回值 7，而不是 24。

function getPosition() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt) {
            return sel.getRangeAt(0).startOffset;
        }
    }
    return null;
}

Answer 1

现场有大量相关信息。这个对我和我的客户都有效。

DEMO

https://stackoverflow.com/a/6249440/2813224

function setCaret(line, col) {
  var ele = document.getElementById("editable");
  var rng = document.createRange();
  var sel = window.getSelection();
  rng.setStart(ele.childNodes[line], col);
  rng.collapse(true);
  sel.removeAllRanges();
  sel.addRange(rng);
  ele.focus();
}

//https://stackoverflow.com/a/6249440/2813224

var line = document.getElementById('ln').value;
var col = document.getElementById('cl').value;
var btn = document.getElementById('btn');
btn.addEventListener('click', function(event) {
  var lineSet = parseInt(line, 10);
  var colSet = parseInt(col, 10);
  setCaret(lineSet, colSet);
}, true);

<div id="editable" contenteditable="true">
  <br/>text text text text text text
  <br/>text text text text text text
  <br/>text text text text text text
  <br/>
  <br/>
</div>
<fieldset>
  <button id="btn">focus</button>
  <input type="button" class="fontStyle" onclick="document.execCommand('italic',false,null);" value="I" title="Italicize Highlighted Text">
  <input type="button" class="fontStyle" onclick="document.execCommand('bold',false,null);" value="B" title="Bold Highlighted Text">
  <input id="ln" placeholder="Line#" />
  <input id="cl" placeholder="Column#" />
</fieldset>