contenteditable true 和 contenteditable false 元素旁边的插入符号行为

Question

我正在尝试创建一个 textarea 来监听输入、粘贴或删除的 URL，并将它们转换为链接。这些链接不可编辑，必须被视为块。 Delete 和 backspace 必须删除它们。 最后，如果在插入符号穿过它们时显示完整的选择，那就太好了。

问题：花了太多时间并尝试了一些在 stackoverflow (Tim Down) 上找到的建议解决方案后，我仍然无法让它正常工作。我发现很难始终将插入符号放在正确的位置，并且在粘贴链接并完成自动转换后，选择被锁定并且无法进行输入。我尝试在每个链接之前和之后插入并保留一个零宽度字符，但随后开始出现其他选择问题。

有人可以看看下面的小提琴，它代表了一个简化版本，重点关注问题，并指出正确的方向通过内容可编辑 div 内的这些不可编辑链接进行正确的键盘导航 ?

jsFiddle here

$("#customtextarea").on("input propertychange drop paste", function (e) {
    var $this = $(this), savedSelection = saveSelection($this.get(0));
    var parsedHtml = getParsedHtml($this.html()); // This gets the innerhtml with the urls turned to links
    $this.html(parsedHtml).focus();
    restoreSelection($this.get(0), savedSelection);
});

---

编辑：我采用了 XuoriG 建议的方法，但我仍然面临或多或少与以前相同的问题：插入符号在链接后被“卡住”，而链接不能被删除。键盘导航（左，右）也不起作用。

New jsFiddle here

Answer 1

使用$this.html 时，您将替换整个 DOM 并丢失您的选择。

我能够做到这一点的方法是在每次按键时动态创建和删除 DOM 节点。我现在不能为你发布代码，但基本上你会遍历每个节点，并创建一个新的锚标记，其内容与你的 url 正则表达式匹配，然后从文本节点中删除。重复直到节点中没有更多匹配项。您将能够以这种方式保存和恢复选择。

之后的困难部分是能够附加到现有的 url。我这样做的方法是检测文本节点是否就在锚标记旁边，如果anchor text + the text node 也与 url 匹配，则将文本节点附加到锚标记并删除文本节点。