knockout and summernote not working

Question

So I'm trying to get knockout to play nicely with summernote and it's not really working. I realized this is because summernote uses a <div contenteditable> and not just an input field.

My binding is this:

ko.bindingHandlers.summernote = {
    init: function (element, valueAccessor) {
        var options = valueAccessor();
        $(element).summernote(options);
    }
};

Obviously knockout doesn't work too well with just a contenteditable, so what can I do?

Answer 1

taking some other answers and making them work for the current version of summernote I've made the following:

Something to note: this bindinghandler accomodates inbound changes from the viewModel as well.

 ko.bindingHandlers.wysiwyg = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = ko.unwrap(valueAccessor());
        var allBindings = ko.unwrap(allBindingsAccessor())
        var optionsBinding = allBindings.wysiwygOptions || {};
        var $element = $(element);
        var options = $.extend({}, optionsBinding);

        var updateObservable = function (e) {
            valueAccessor($element.summernote('code'));
            return true;
        };

        options.callbacks = {};
        options.callbacks.onKeyup = options.callbacks.onFocus = options.callbacks.onBlur = updateObservable;

        $element.html(value).summernote(options);
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = ko.unwrap(valueAccessor());
        $(element).summernote('code', value);
    }
};

A few options have changed and you don't have to investigate event dom data. Also I don't need to update on both keyDown and keyUp so my list of events are a bit different. And my binding handler isn't "summernote" in order to make this more flexible to be changed out in the future. it's just wysiwyg. YMMV