當元素失去焦點時，如何在一個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);
});

至於超鏈接的東西，我現在正在努力，我會很快更新這個答案。