Question

我试图编写一个自定义绑定来将knockout绑定到froala-editor。

我的绑定以下列方式工作：

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

我在这里使用autosaveInterval，因为我找不到更合适的方法。

我的HTML非常简单：

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

相应的JS：

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

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

一切正常，但唯一的问题是，在每autosaveInterval次之后，编辑器的焦点就会丢失。经过调查，我发现observable( html );是罪魁祸首。如果我发表评论，焦点不会丢失，但我的模型不同步是可以理解的。

有人可以帮我吗？

感谢@nemesv，我能够制作jsfiddle with a repro。

Answer 1

由于行$(element).editable("setHTML", value);，您正在失去焦点。当您使用var html = $(element).editable("getHTML")[0];时，您将获得HTML，但它不会从编辑器中为您提供选择。测试您在更新中获得的值是否与前一个不同，不会再忽略选择。 http://jsfiddle.net/DVHzZ/16/

Answer 2

contentChanged是一个事件而不是回调，并且在更新版本的froala中[0]不再需要getHTML。

这是updated fiddle。

froala的自定义挖空绑定使编辑器松散焦点

2 个答案: