bootstrap-wysiwyg loses focus

Question

I'm trying to implement bootstrap-wysiwyg editor in a project, but every time I click a button in the toolbar that has a dropdown the editor loses focus, meaning that, for example, it's impossible to add links because the text is not selected, and images are always added at the beginning of the content because the caret position in the editor was lost. This happens in Firefox and Chrome. Here is the HTML code for the insert link button for example (quite similar to the editor documentation example, but not working)

<div class="panel panel-info">
    <div class="panel-heading">
        <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
            <div class="btn-group">
                <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Insert Link"><i class="fa fa-link text-primary"></i></a>
                <div class="dropdown-menu input-append">
                    <input class="form-control" type="text" data-edit="createLink" placeholder="URL" />
                    <button class="btn btn-success" type="button"><i class="fa fa-link"></i></button>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-body">
        <div id="editor">

        </div>
    </div>
</div>

The only JS code is the editor hook:

<script>
    $(document).ready(function () {
        $('#editor').wysiwyg();
    });
</script>

I'm using jQuery v2.1.4, Bootstrap v3.3.6, and bootstrap-wysiwyg v1.0.4 Thank you for your help.

Answer 1

The version of the bootstrap-wysiwyg that you are using is out of date. This bug was fixed in the most recent version. You can download it here.