プロジェクトに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 の追加機能がまったく機能しないように見えるかもしれませんが、機能しますが、エディターにフォーカスが必要です。したがって、最初に URL を入力し、次にエディターにフォーカスしてテキストを選択し、ドロップダウンを開いて [追加] をもう一度クリックします。