javascript - contenteditable 中的自动链接 URL

Question

当用户在可内容编辑的 div 中完成输入 URL 时，我想自动链接它，就像 Medium 那样: ).

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

在用户按下空格键后，我能够检测到 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);