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>
<script src="http://tinymce.cachefly.net/4.0/jquery.tinymce.min.js"></script>
In the paragraph below you can edit your html. Knockout with textarea bindings

<div class="editableArea" data-bind="wysiwyg: txt, wysiwygConfig: wysiwygOptions "></div>

CSS

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

JavaScript

/*tinymce-knockout-binding v1.0.2|(c) 2014 Michael Papworth|https://raw.github.com/michaelpapworth/tinymce-knockout-binding/master/LICENSE*/
!function(a,b){b.bindingHandlers.wysiwyg={extensions:{},init:function(c,d,e,f,g){if(!b.isWriteableObservable(d()))throw"valueAccessor must be writeable and observable";var h=e.has("wysiwygConfig")?e.get("wysiwygConfig"):{},i=e.has("wysiwygExtensions")?e.get("wysiwygExtensions"):[],j={browser_spellcheck:a(c).prop("spellcheck"),plugins:["link","paste"],toolbar:"undo redo | bold italic | bullist numlist | link",menubar:!1,statusbar:!1,setup:function(a){a.on("change keyup nodechange",function(c){d()(a.getContent());for(var f in i)b.bindingHandlers.wysiwyg.extensions[i[f]](a,c,e,g)})}};j=a.extend(j,h),a(c).text(d()()).tinymce(j),b.utils.domNodeDisposal.addDisposeCallback(c,function(){a(c).tinymce().remove()})},update:function(a,c,d,e,f){return b.bindingHandlers.value.update(a,c,d,e,f)}}}(jQuery,ko),function(a){a.extensions.dirty=function(a,b,c,d){if(c.has("wysiwygDirty")){var e=c.get("wysiwygDirty");if(!ko.isWriteableObservable(e))throw"wysiwygDirty must be writeable and observable";e(a.isDirty())}else d.$root.isDirty=a.isDirty()}}(ko.bindingHandlers.wysiwyg),function(a){a.extensions.wordcount=function(a,b,c,d){var e=a.plugins.wordcount;if(e&&c.has("wysiwygWordCount")){var f=c.get("wysiwygWordCount");if(!ko.isWriteableObservable(f))throw"wysiwygWordCount must be writeable and observable";f(e.getCount())}}}(ko.bindingHandlers.wysiwyg);
//# sourceMappingURL=wysiwyg.min.map


function ViewModel() {
    var self = this;
    self.txt = ko.observable('first text area. It also inherits the classof my div: So right now most ');
    self.wysiwygOptions = {    
        schema: 'html5',
        inline: true,
        toolbar: 'bold italic',
        menubar: false,
        paste_as_text: true
    };
}

ko.applyBindings(new ViewModel());