当元素失去焦点时，如何在一个contenteditable元素中保留文本？

Question

在项目中实现bootstrap-wysiwyg编辑器时，我发现无法重现如何在该示例编辑器中添加链接。

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

但是，尽我所能，每当我点击我的实现中的URL输入时，选择都会丢失，并且添加超链接功能将无法工作。 如何在bootstrap-wysiwyg演示中完成？ 我甚至尝试过在演示中使用相同的旧版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> 

如果您愿意，那么在小提琴中也是如此：

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

请注意，尽管最初可能会显示添加网址功能根本不起作用，但确实如此，但它需要编辑器具有焦点。 因此，首先填写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);
});

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