JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="http://asflat.free.fr/froala/js/froala_editor.min.js"></script>
<script src="http://asflat.free.fr/froala/js/plugins/font_size.min.js"></script>
<link rel="stylesheet" href="http://asflat.free.fr/froala/css/font-awesome.min.css">
<link rel="stylesheet" href="http://asflat.free.fr/froala/css/froala_editor.min.css">
<link rel="stylesheet" href="http://asflat.free.fr/froala/css/froala_style.min.css">
<div data-bind="with: model"> 
    <div id="edit" data-bind="froalaEditor: $root.txt"></div>
    <br/>
    <span data-bind="text: $root.txt"></span>
</div>

JavaScript

Array.prototype.findByProperty = function (prop, value) {
	for(var i = 0 ; i < this.length ; i++) {
		if (this[i][prop] === value) {
			return this[i];
		}
	}
};

// custom binding
ko.bindingHandlers.froalaEditor = {
    init: function (element, valueAccessor, allBindings) {
        var options = {
            inlineMode: false,
            alwaysBlank: false,
            buttons: ["bold", "fontSize"]
        };
        $(element).editable(options);
        $(element).on('editable.contentChanged', function (e, editor) {
            var html = editor.getHTML();
            console.log(html);
            observable = valueAccessor();
            observable(html);
        });

        // handle disposal (if KO removed by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).editable("destroy");
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value !== null && $(element).editable("getHTML") !== value) {
            $(element).editable("setHTML", value);
        }
    }
}

function test() {
    this.model = ko.observable(new Object);
    this.txt = ko.observable('Hello');
}
var a = new test();
ko.applyBindings(a);