JSFiddle - React, Tailwind, and code Playground

by Salvador Dali

HTML

<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
In the paragraph below you can edit your html. Knockout with textarea bindings

<span data-bind="foreach: editableAreas">
    <div class="editableArea" data-bind="value: txt, valueUpdate: 'afterkeydown'></div>
    <span data-bind="text: txt"></span>
</span>

CSS

.editableArea{
    margin: 40px 20px 20px 20px
}

JavaScript

function ViewModel() {
    var self = this;
    self.editableAreas = ko.observableArray([{
        id : 1,
        txt: ko.observable('first text area'),
    },{
        id : 2,
        txt: ko.observable('second text area'),
    },{
        id : 3,
        txt: ko.observable('all observable text area'),
    }]);
}

ko.applyBindings(new ViewModel());

tinymce.init({
    selector: "div.editableArea",
    schema: "html5",
    inline: true,
    toolbar: "bold italic underscore",
    menubar: false
});