JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.ckeditor.com/4.4.7/full/ckeditor.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.4.5/adapters/jquery.js"></script>
<p>Edit html</p>
<textarea 
    data-bind="ckeditor: mytext, valueUpdate: 'afterkeydown'"
></textarea>

<p>Edit source :)</p>
<textarea     
    data-bind="value:mytext"
    rows="10"
    style="width:100%"
></textarea>

JavaScript

// ---- ckeditor binding
ko.bindingHandlers.ckeditor = {
    init: function(element, valueAccessor, allBindingsAccessor, context) {
        var options = allBindingsAccessor().ckeditorOptions || {};
        var modelValue = valueAccessor();
        var value = ko.utils.unwrapObservable(valueAccessor());

        $(element).html(value);
        $(element).ckeditor();

        var editor = $(element).ckeditorGet();

        //handle edits made in the editor
        editor.on('change', function(e) {
            var self = this;
            if (ko.isWriteableObservable(self)) {
                self($(e.listenerData).val());
            }
        }, modelValue, element);

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            if (editor) {
                CKEDITOR.remove(editor);
            };
        });
    },
    update: function(element, valueAccessor, allBindingsAccessor, context) {
        // handle programmatic updates to the observable
        var newValue = ko.utils.unwrapObservable(valueAccessor());
        if ($(element).ckeditorGet().getData() != newValue)
            $(element).ckeditorGet().setData(newValue)
    }
};	

// Here's my data model
var ViewModel = function() {
    this.mytext = ko.observable("You may think I'm a dreamer");    
};
ko.applyBindings(new ViewModel())