contenteditable 中的自动链接 URL

Question

当用户完成在 contenteditable div 中输入 URL 时，我想自动链接它，就像 Medium 所做的那样：)。

我想知道如何使用选择/范围来实现这一点（我不需要支持 IE，只支持 Chrome、Firefox 和 Safari 的现代版本），如果可能的话没有范围（但如果这是唯一的解决方案我会用它）。

在用户按下空格键后，我能够检测 URL 是否在插入符号之前，但我无法让 execcommand('createLink'...) 在我的范围内工作。

这是一个非常简化的示例 (jsfiddle)，在用户按下空格键后，我尝试将插入符号前面的 4 个字符格式化为粗体：

$("#editor").on("keypress", function(event) {
  var pressedChar = String.fromCharCode(event.which);
  if(/\s/.test(pressedChar)) {
    var selection   = window.getSelection();
    var range       = selection.getRangeAt(0);
    range.setStart(range.startContainer, range.startOffset - 4);

    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('bold', false);
  }
}

当我输入几个字符，然后输入一个空格时，前面的 4 个字符没有按照我的意愿设置为粗体，它们只是从 div 中消失，只有我之后输入的新字符是粗体。

Answer 1

终于找到了解决方法，不用execCommand：

1. 删除范围内容：range.deleteContents()
2. 创建我要插入的链接节点
3. 在范围内插入节点：range.insertNode(createdLinkNode)
4. 将插入符号放在插入的节点之后：

 

range.setStartAfter(createdLinkNode);
range.setEndAfter(createdLinkNode);
selection.removeAllRanges();
selection.addRange(range);