Custom knockout binding for froala makes editor free focus

Question

I am trying to write a custom binding for knockout binding to froala-editor .

My binding works as follows:

ko.bindingHandlers.froala = {
    init: function(element, valueAccessor){
        var options = {
            inlineMode: false,
            alwaysBlank: true,
            buttons : ["bold", "italic", "createLink"],
            autosaveInterval: 10,
            contentChangedCallback: function () {
                var html = $(element).editable("getHTML"),
                    observable  = valueAccessor();
                observable( html );
            }
        };
        $(element).editable(options);

        // handle disposal (if KO removed by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).editable("destroy");
        });
    },
    update: function(element, valueAccessor){
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).editable("setHTML", value);
    }
}

Here I use autosaveInterval because I could not find a more suitable method.

My HTML is very simple:

<div data-bind="froala: txt"></div>

Corresponding JS:

function test() {
    this.txt = ko.observable('Hello');
}

var a = new test();
ko.applyBindings(a);

Everything works, but the only problem is that after every autosaveIntervaltime the focus from my editor is lost. After the investigation, I discovered that I observable( html );was the culprit. If I comment on this, the focus is not lost, but it is clear that my model is not synchronized.

Can anybody help me?

@nemesv jsfiddle .

Answer 1

- $(element).editable("setHTML", value);. var html = $(element).editable("getHTML")[0];, HTML, . , , , , . http://jsfiddle.net/DVHzZ/16/

Answer 2

contentChanged - , [0] getHTML froala.

.