JSFiddle - React, Tailwind, and code Playground

by infiniteloops

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.4.1/ckeditor.js"></script>
<link rel="stylesheet" href="https://magnoliacrm.hawkeyeww.com/js/cleditor/jquery.cleditor.css">
<script src="https://magnoliacrm.hawkeyeww.com/js/cleditor/jquery.cleditor.js"></script>
<script src="https://magnoliacrm.hawkeyeww.com/js/cleditor/plugins/jquery.cleditor.icon.min.js"></script>
<textarea id='txtinput' name='txtinput' data-bind='cleditor: textData'></textarea>
<br />
<input type='button' value='Click to add' onClick='vm.addData()' />
<hr/>

<h3>json data</h3>

<pre data-bind='text: jsonData'></pre>

JavaScript

var viewModel = function () {
    var self = this;
    self.textData = ko.observable();
    self.jsonData = ko.computed(function () {
        return ko.toJSON(self.textData);
    });
    self.addData = function () {
        var currentData = self.textData() || '';
        window.textEditorUpdate['txtinput'](currentData + ' New Data ');
    };
}

window.textEditorUpdate = [];

window.ckeditorUpdate = function (elementId, updatedText) {
    var instance = CKEDITOR.instances[elementId];
    instance.setData(updatedText);
};
ko.bindingHandlers.ckeditor = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        window.textEditorUpdate[element.id] = function(updatedText) { window.ckeditorUpdate(element.id, updatedText);};
        var modelValue = valueAccessor(),
            allBindings = allBindingsAccessor();
        CKEDITOR.replace(element.id);
        var instance = CKEDITOR.instances[element.id];
        instance.on('change', function () {
            modelValue(instance.getData());
            console.log('change fired');
        });        
    }
};

window.cleditorUpdate = function (elementId, updatedText) {
    var $editor = $('#' + elementId).cleditor()[0];
    $editor.doc.body.innerHTML = updatedText;
    $editor.updateTextArea();
};
//binding handler to wire-up cleditor and monitor rich-text changes
ko.bindingHandlers.cleditor = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        window.textEditorUpdate[element.id] = function(updatedText){ window.cleditorUpdate(element.id, updatedText);};
        var modelValue = valueAccessor(),
            allBindings = allBindingsAccessor();

        var $editors = $(element).cleditor({
            width: 390, // width not including margins, borders or padding
            height: 400, // height not including margins, borders or padding
            controls: "bold italic underline removeformat | bullets numbering | outdent indent | pastetext",
            bodyStyle:...