Knockout and summernote not working

Question

So, I'm trying to get a knockout to play well with summernote , and it does not work. I realized that this is because summernote uses <div contenteditable>, 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 affordable, so what can I do?

Answer 1

I really started to think about it a little more and decided to publish my own solution, since there was nothing else on Google. All I did was change the above binding to:

ko.bindingHandlers.summernote = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = valueAccessor();
        var binding = ko.utils.unwrapObservable(allBindingsAccessor()).value;

        var updateObservable = function(e) {
            binding(e.currentTarget.innerHTML);
        };

        options.onkeydown = options.onkeyup = options.onfocus = options.onblur = updateObservable;

        $(element).summernote(options);
    }
};

// /keyrelease . , .

Answer 2

, ...

( CoffeeScript):

ko.bindingHandlers.summernote =
    init: (element, valueAccessor, allBindingsAccessor) ->
        options = valueAccessor()      
        options.toolbar = [    
            ['style', ['bold', 'italic', 'underline', 'clear']],            
            ['fontsize', ['style']],            
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],            
            ['misc', ['codeview']],
        ]

        options.onblur = () -> valueAccessor() $(element).code()                      
        $(element).summernote(options) 

    update: (element, valueAccessor, allBindingsAccessor) ->
        $(element).code(ko.utils.unwrapObservable(valueAccessor()))

HTML:

<textarea data-bind="summernote: Content"></textarea>

Answer 3

summernote, :

- : viewModel.

 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);
    }
};

, dom dom. keyDown, keyUp, . "summernote", . wysiwyg. YMMV

Answer 4

:

• There is a glitch that appears in some cases using the toolbar. To fix this, the update should be blocked when it occurs through a blur event.
• Also added the ability to override parameters using the element’s summerOptions property.

Here is my update:

ko.bindingHandlers.summernote = new function () {
    var isblur = false;

    this.init = function (element, valueAccessor, allBindings) {
        var value = valueAccessor();
        var options = $.extend(value, {
            height: 100,
            toolbar: [
                ["style", ["bold", "italic", "underline", "clear"]],
                ["fontstyle", ["style"]],
                ["fontsize", ["fontsize"]],
                ["lists", ["ul", "ol", "paragraph"]],
                ["links", ["link", "picture"]],
                ["misc", ["fullscreen", "codeview"]]
            ],
            onblur: function () {
                isblur = true;
                value($(element).code());
                isblur = false;
            }
        });
        $.extend(options, allBindings.get("summerOptions"));
        return $(element).summernote(options);
    };
    this.update = function (element, valueAccessor) {
        if (!isblur) {
            var value = valueAccessor();
            $(element).code(value());
        }
    };
};

And use:

<textarea data-bind="summernote: Content"></textarea>

Or with overriding options:

<textarea data-bind="summernote: Content, summerOptions: { height: 200 }"></textarea>

Answer 5

My solution is to listen to the event onChange

ko.bindingHandlers.summernote = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = ko.unwrap(valueAccessor());
        var $element = $(element);
        $element.html(value).summernote({
            onChange: function (contents) {
                valueAccessor()(contents);
            }
        });
    }
};

Edit

After v0.7.0, each callback must be wrapped with a callback object.

ko.bindingHandlers.summernote = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = ko.unwrap(valueAccessor());
        var $element = $(element);
        $element.html(value).summernote({
            callbacks:{ // added for V0.7.0
                onChange: function (contents) {
                    valueAccessor()(contents);
                }
            }
        });
    }
};

Answer 6

ko.bindingHandlers.summernote = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var value = ko.unwrap(valueAccessor());
    var $element = $(element);
    $element.html(value).summernote({
         callbacks:{
        onChange: function (contents) {
            valueAccessor()(contents);
        }
   }
  });
 }
};