3

在项目中实现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/

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

4

1 回答 1

1

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

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

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

于 2015-03-02T05:43:07.633 回答