4

我正在尝试编写自定义绑定以将淘汰赛绑定到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，我能够用 repro 制作一个jsfiddle。

4

2 回答 2

2

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

于 2014-04-27T17:45:08.657 回答
1

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

这是一个更新的小提琴。

于 2015-03-20T16:39:12.833 回答