I came up with the following custom binding which seems to work. I use a bit of JQuery, but not that much, so you can always replace it with something non-JQuery.
The custom binding:
ko.bindingHandlers.nicedit = {
init: function(element, valueAccessor) {
var value = valueAccessor();
var area = new nicEditor({fullPanel : true}).panelInstance(element.id, {hasPanel : true});
$(element).text(ko.utils.unwrapObservable(value));
// function for updating the right element whenever something changes
var textAreaContentElement = $($(element).prev()[0].childNodes[0]);
var areachangefc = function() {
value(textAreaContentElement.html());
};
// Make sure we update on both a text change, and when some HTML has been added/removed
// (like for example a text being set to "bold")
$(element).prev().keyup(areachangefc);
$(element).prev().bind('DOMNodeInserted DOMNodeRemoved', areachangefc);
},
update: function(element, valueAccessor) {
var value = valueAccessor();
var textAreaContentElement = $($(element).prev()[0].childNodes[0]);
textAreaContentElement.html(value());
}
};
And how to use it:
<textarea id="area1" data-bind="nicedit: title" style="width: 640px"></textarea>
... where in my example "title" is your bound property of course.
There are two "limitations":
- The textarea must have a DOM "id" attribute otherwise it crashes.
- With IE (at least, version 8) the
DOMNodeInserted
andDOMNodeRemoved
are not fired, which means that you have to type something after modifying the style of your text for it to be properly updated in your observable object.