当元素失去焦点时，如何保持可内容编辑元素中的文本处于选中状态？
当元素失去焦点时，如何保持可内容编辑元素中的文本处于选中状态？
提问于 2015-01-26 18:53:13
在项目中实现bootstrap-wysiwyg editor时，我发现无法在示例编辑器中重现添加链接的方式。
在本例中，您可以首先在可编辑区域中选择文本，然后打开add超链接下拉列表，输入URL，然后单击Add，同时将原始选择保留在contenteditable元素中。
但是，尽管如此，每当我在实现中单击URL输入时，选择都会丢失，并且add hyperlink功能将不起作用。在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功能根本不起作用，但它确实起作用了，但它需要编辑器有焦点。因此，首先填写URL，然后聚焦编辑器并选择一些文本，然后打开下拉菜单并再次单击Add。
回答 1
Stack Overflow用户
发布于 2015-03-02 13:43:08
如果检查源代码，你会发现每次在编辑器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);
});至于超链接的东西，我现在正在做这个工作，我会很快更新这个答案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28148742
复制相关文章
相似问题
腾讯云开发者
