Question

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

在示例中，您可以先在可编辑区域中选择文本，然后打开添加超链接下拉列表，输入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，然后关注编辑器并选择一些文本，然后打开下拉列表并再次单击Add。

Answer 1

如果您检查来源，您会发现，每当mouseup，keyup或mouseout事件在编辑器div上触发时，他们就会抓取该范围的副本。这允许在对其进行操作之前重新创建选择。

在第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);
});

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

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

1 个答案: