JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://mindmup.github.io/bootstrap-wysiwyg/external/jquery.hotkeys.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<link rel="stylesheet" href="http://mindmup.github.io/bootstrap-wysiwyg/index.css">
<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" />
	    <button id="addBtn" class="btn" type="button">Add</button>
    </div>
</div>

CSS

#editor {
    width: 100px;
    height: 100px;
    overflow: auto;
    border: 1px solid black;
}

JavaScript

$('#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.attr('contenteditable', true)
.on(namespaceEvents('mouseup keyup mouseout'), function () {
  saveSelection();
  updateToolbar();
});
toolbar.find('[data-toggle=dropdown]').click(restoreSelection);
toolbar.find('[data-toggle=dropdown]').click(function () {
  setTimeout(restoreSelection, 20);
});