knockout.js - knockout 和summernote不起作用

Question

所以我试图让 knockout 与 summernote 打得很好。它并没有真正起作用。我意识到这是因为 Summernote 使用了 <div contenteditable>而不仅仅是一个输入字段。

我的绑定(bind)是这样的:

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

显然，仅使用 contenteditable knockout 并不能很好地工作，那我该怎么办？

Answer 1

采取其他一些答案并使它们适用于当前版本的summernote 我做了以下工作:

需要注意的一点:这个 bindinghandler 也适应来自 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 数据。此外，我不需要同时更新 keyDown 和 keyUp，所以我的事件列表有点不同。而且我的绑定(bind)处理程序不是“summernote”，以便将来更灵活地进行更改。这只是所见即所得。
YMMV