tinymce
https://groups.google.com/d/topic/knockoutjs/yZIZ2QXWEPo/discussion
HTML
<script src="http://tinymce.moxiecode.com/js/tinymce/jscripts/tiny_mce/classes/adapter/jquery/jquery.tinymce.js"></script>
<script src=" http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<!-- ko foreach: items -->
<textarea data-bind="tinymce: content"></textarea>
<!-- /ko -->
JavaScript
var tinymce_config = {
script_url: "http://tinymce.moxiecode.com//js/tinymce/jscripts/tiny_mce/tiny_mce.js",
theme: "standard",
width: "100%"
};
ko.bindingHandlers.tinymce = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var options = tinymce_config;
var modelValue = valueAccessor();
//handle edits made in the editor
options.setup = function(editor) {
editor.onChange.add(function(editor, l) {
if (ko.isWriteableObservable(modelValue)) {
modelValue(l.content);
}
});
};
$(element).tinymce(options);
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
//handle programmatic updates to the observable
var value = ko.utils.unwrapObservable(valueAccessor());
if (value) $(element).html(value);
}
};
function ViewModel() {
var self = this;
self.items = ko.observableArray([
{content: ko.observable('Test 123')},
{content: ko.observable('Test 456')},
{content: ko.observable('Test 789')},
]);
}
jQuery(function($) {
ko.applyBindings(new ViewModel());
});