tinymce

https://groups.google.com/d/topic/knockoutjs/yZIZ2QXWEPo/discussion

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/jquery.tmpl.min.js"></script>
<script src="http://tinymce.moxiecode.com//js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script src="http://tinymce.moxiecode.com/js/tinymce/jscripts/tiny_mce/classes/adapter/jquery/jquery.tinymce.js"></script>
<form method="post" action="somepage">
    <textarea name="content" style="width:100%" data-bind="tinymce: content, tinymceOptions: { theme: 'advanced' }"></textarea>
</form>

<hr />

<button data-bind="click: clear">Clear</button>

<hr />

<div data-bind="text: ko.toJSON(viewModel)"></div>

JavaScript

ko.bindingHandlers.tinymce = {
    init: function(element, valueAccessor, allBindingsAccessor, context) {
        var options = allBindingsAccessor().tinymceOptions || {};
        var modelValue = valueAccessor();
        
        //handle edits made in the editor
        options.setup = function(ed) {
            ed.onChange.add(function(ed, l) {
                if (ko.isWriteableObservable(modelValue)) {
                   modelValue(l.content);   
                }
            });
        };
        
        //handle destroying an editor (based on what jQuery plugin does)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).parent().find("span.mceEditor,div.mceEditor").each(function(i, node) {
                var ed = tinyMCE.get(node.id.replace(/_parent$/, ""));
                if (ed) {
                    ed.remove();
                }
            });
        });   

        
        $(element).tinymce(options);

    },
    update: function(element, valueAccessor, allBindingsAccessor, context) {
        //handle programmatic updates to the observable
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).html(value);
    }
};

var viewModel = {
    content: ko.observable("here is some content"),
    clear: function() {
       this.content("");   
    }
};

ko.applyBindings(viewModel);