Javascript 当元素失去焦点时，如何在contenteditable元素中保持选中的文本？

在项目中实现时，我发现我无法重现在示例编辑器中添加链接的工作方式

在本例中，您可以首先选择可编辑区域中的文本，然后打开“添加超链接”下拉列表，输入URL，然后单击“添加”，同时将原始选择保留在contenteditable元素中

但是，尽管我可能会尝试，只要我在我的实现中单击URL输入，选择就会丢失，添加超链接功能将无法工作。在bootstrap wysiwyg演示中是如何实现的？我甚至尝试使用与演示中相同的、较旧版本的jQuery和Bootstrap，但这似乎没有什么不同

下面是一个片段：

$（“#编辑器”）.wysiwyg（）；
$（'.下拉菜单输入'）。单击（函数（）{
返回false；
})
.改变（功能）{
$（此）.parent（“.dropdown menu”）
.sides（“.dropdown toggle”）
.下拉列表（“切换”）；
})
.keydown（'esc'，函数（）{
这个。值=“”；
$（this.change（）；
});
$（'#addBtn'）。单击（函数（）{
document.execCommand（'createLink'，false，$（'#linkInput'）.val（））；
});
#编辑器{
宽度：90%；
高度：100px；
边框：1px纯黑；
}

编辑我！
添加
如果您检查源代码，您会发现每次在编辑器div上触发
鼠标点
，
键控
或
鼠标点
事件时，它们都会抓取范围的副本。这允许在对其进行操作之前重新创建选择

在300线附近你会发现这个

editor.attr('contenteditable', true)
.on(namespaceEvents('mouseup keyup mouseout'), function () {
  saveSelection();
  updateToolbar();
});

toolbar.find('[data-toggle=dropdown]').click(restoreSelection);

在248线附近你会发现这个

editor.attr('contenteditable', true)
.on(namespaceEvents('mouseup keyup mouseout'), function () {
  saveSelection();
  updateToolbar();
});

toolbar.find('[data-toggle=dropdown]').click(restoreSelection);

这在IE上工作不稳定，因为它对时间敏感，DOM更新速度慢（例如根据标准演示显示/隐藏字体下拉列表）会把事情搞砸。您只需在尝试恢复选择之前完成DOM更新，即可修复此问题，如下所示：

toolbar.find('[data-toggle=dropdown]').click(function () {
  setTimeout(restoreSelection, 20);
});

至于超链接的东西，我现在正在研究，我会很快更新这个答案