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"><textarea data-bind="value: txt, valueUpdate: 'afterkeydown'"></textarea></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());