当用户完成输入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中消失,只有我之后键入的新字符才会加粗.

解决方法:

终于找到了一个解决方法,而不使用execCommand：

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

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