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

Question

在执行 bootstrap-wysiwyg editor 时在一个项目中，我发现我无法在该示例编辑器中重现添加链接的工作方式。

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

但是，尽我所能尝试，每当我在我的实现中单击 URL 输入时，选择就会丢失，并且添加超链接功能将不起作用。 bootstrap-wysiwyg demo中是怎么做到的？我什至尝试过在演示中使用相同的旧版本 jQuery 和 Bootstrap，但这似乎没有什么不同。

这是一个片段:

$('#editor').wysiwyg();

$('.dropdown-menu input').click(function() {
    return false;
})
.change(function () {
    $(this).parent('.dropdown-menu')
    .siblings('.dropdown-toggle')
    .dropdown('toggle');
})
.keydown('esc', function () {
    this.value='';
    $(this).change();
});

$('#addBtn').click(function() {
    document.execCommand('createLink', false, $('#linkInput').val());
});

#editor {
    width: 90%;
    height: 100px;
    border: 1px solid black;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"/>
<link href="http://mindmup.github.io/bootstrap-wysiwyg/index.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://mindmup.github.io/bootstrap-wysiwyg/external/jquery.hotkeys.js"></script>
<script src="http://mindmup.github.io/bootstrap-wysiwyg/bootstrap-wysiwyg.js"></script>
<div id="editor">
  Edit me!
</div>
<div class="btn-group">
    <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Hyperlink">
        <i class="icon-link"></i>
    </a>
    <div class="dropdown-menu">
	    <input id="linkInput" placeholder="URL" type="text" data-edit="createLink">
	    <button id="addBtn" class="btn" type="button">Add</button>
    </div>
</div>

如果您愿意，也可以在 fiddle 中使用相同的方法:

http://jsfiddle.net/Schlaus/sydrb05c/1/

请注意，虽然乍一看添加 URL 功能似乎根本不起作用，但它确实起作用，但它需要编辑器具有焦点。因此，首先填写一个 URL，然后聚焦编辑器并选择一些文本，然后打开下拉列表并再次单击“添加”。

Answer 1

如果您检查源代码，您会发现每次在编辑器 div 上触发 mouseup、keyup 或 mouseout 事件时，它们都会获取一个范围的副本。这允许在对其进行操作之前重新创建选择。

在第 300 行附近，您会找到这个

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

在第 248 行附近你会发现这个

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

这在 IE 上工作不稳定，因为它对时间敏感，DOM 更新缓慢(例如，根据标准演示显示/隐藏字体下拉列表)会把事情搞砸。您可以通过在尝试恢复选择之前允许 DOM 更新完成来简单地修复它，如下所示:

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

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