Knockout Binding with Bootstrap 2 for WYSIWIG

Do not Normalize CSS. Needs Bootstrap 3 Update.

HTML

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js" type="text/javascript"></script>
<script src="https://dl.dropboxusercontent.com/u/1362566/jquery.hotkeys.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/1362566/bootstrap-wysiwyg.js"></script>
<div class="container">
    <div class="hero-unit">
        <textarea data-bind="value: name, valueUpdate: 'afterkeydown'"></textarea>
        
<h4>Output when using normal text area</h4>

        <p data-bind="html: name"></p>
        <hr/>
        <!--- Please read this before copying the toolbar: * One of the best things about this widget is that it does not impose any styling on you, and that it allows you * to create a custom toolbar with the options and functions that are good for your particular use. This toolbar * is just an example - don't just copy it and force yourself to use the demo styling. Create your own. Read * this page to understand how to customise it: * https://github.com/mindmup/bootstrap-wysiwyg/blob/master/README.md#customising- --->
        <div id="alerts"></div>
        <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
            <div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>

                <ul class="dropdown-menu"></ul>
            </div>
            <div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>

 ...

CSS

#editor {
    max-height: 250px;
    height: 250px;
    background-color: white;
    border-collapse: separate;
    border: 1px solid rgb(204, 204, 204);
    padding: 4px;
    box-sizing: content-box;
    -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
    box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    overflow: scroll;
    outline: none;
}
#voiceBtn {
    width: 20px;
    color: transparent;
    background-color: transparent;
    transform: scale(2.0, 2.0);
    -webkit-transform: scale(2.0, 2.0);
    -moz-transform: scale(2.0, 2.0);
    border: transparent;
    cursor: pointer;
    box-shadow: none;
    -webkit-box-shadow: none;
}
div[data-role="editor-toolbar"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.dropdown-menu a {
    cursor: pointer;
}

JavaScript

ko.bindingHandlers.htmlValue = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var updateHandler = function () {
            var modelValue = valueAccessor(),
                elementValue = element.innerHTML;
            //update the value on keyup
            modelValue(elementValue);
        };

        ko.utils.registerEventHandler(element, "keyup", updateHandler);
        ko.utils.registerEventHandler(element, "input", updateHandler);
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()) || "",
            current = element.innerHTML;

        if (value !== current) {
            element.innerHTML = value;
        }
    }
};

var viewModel = {
    name: ko.observable("Normal Text area that updates the observables after keydown"),
    changeName: function () {
        this.name("Expert");
    },
    nameVisible: ko.observable(true)
};
ko.applyBindings(viewModel);


function initToolbarBootstrapBindings() {
    var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
        'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
        'Times New Roman', 'Verdana'],
        fontTarget = $('[title=Font]').siblings('.dropdown-menu');
    $.each(fonts, function (idx, fontName) {
        fontTarget.append($('<li><a data-edit="fontName ' + fontName + '" style="font-family:\'' + fontName + '\'">' + fontName + '</a></li>'));
    });
    $('a[title]').tooltip({
        container: 'body'
    });
    $('.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();
    });

    $('[data-role=magic-overlay]').each(function () {
        var overlay = $(this),
            target =...