JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/stefanneculai/froala-wysiwyg/master/css/font-awesome.min.css">
<link rel="stylesheet" href="https://rawgithub.com/stefanneculai/froala-wysiwyg/master/css/froala_editor.min.css">
<script src="https://rawgit.com/stefanneculai/froala-wysiwyg/37e7cd377acd42b255458568125e4d2f4f0aa3e9/js/froala_editor.min.js"></script>
<div id="edit" data-bind="froala: txt"></div>
<span data-bind="text: txt"></span>

JavaScript

ko.bindingHandlers.froala = {
    init: function(element, valueAccessor) {
        var options = {
            inlineMode: false,
            alwaysBlank: true,
            buttons: ["bold", "italic", "createLink"],
            autosaveInterval: 10,
            contentChangedCallback: function() {
                //setTimeout(function() {
                var html = $(element).editable("getHTML")[0];
                observable = valueAccessor();
                observable(html);
                //},1);
            }
        };
        console.log('tipp');
        $(element).editable(options);

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

function test() {
    this.txt = ko.observable('');
}
var a = new test();
ko.applyBindings(a);
setTimeout(function() {
    a.txt('Hello Again')
}, 1000);