Question

所以我试图让淘汰赛与summernote很好地配合，并且它并没有真正发挥作用。我意识到这是因为summernote使用<div contenteditable>而不仅仅是输入字段。

我的约束是：

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

显然，淘汰赛并没有太好用，只有满足，但我该怎么办？

Answer 1

采取其他一些答案并使它们适用于当前版本的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数据。此外，我不需要更新keyDown和keyUp，所以我的事件列表有点不同。而且我的绑定处理程序不是“summernote”，以便将来更灵活地更改。它只是所见即所得。 YMMV

Answer 2

我实际上开始考虑更多这一点，并决定发布我自己的解决方案，因为谷歌上没有其他任何东西。我所做的就是将上面的绑定更改为：

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

只是观看模糊/焦点/按键/键释放事件就足以更新可观察量。它并不完美，但它确实有效。

Answer 3

我正在使用以下双向绑定，它对我有用......

Knockout绑定（在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 4

小修正并更改以前的答案：

使用工具栏会出现某些故障。要解决此问题，必须在通过模糊事件发生更新时阻止更新。
还添加了通过＆＃34; summerOptions＆＃34;覆盖选项的功能。元素上的属性。

这是我的更新：

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

用法：

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

或者使用选项覆盖：

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

Answer 5

我的解决方案是收听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);
            }
        });
    }
};

修改

在v0.7.0之后，每个回调都应该由回调对象包装。

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

Answer 7

使用此解决方案，对我有用

ko.bindingHandlers.summernote = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var value = ko.unwrap(valueAccessor());                
            var allBindings = ko.unwrap(allBindingsAccessor())
            var optionsBinding = allBindings.summernoteOptions || {};
            var $element = $(element);
            var options = $.extend({}, optionsBinding);

            var updateObservable = function (e) {
                valueAccessor()($element.summernote('code'));
                return true;
            };

            options.callbacks = {};
            //options.callbacks.onFocus = options.callbacks.onBlur = updateObservable;

            $element.html(value).summernote(options);

            $(element).next().find('.note-editable').keyup(updateObservable);
            $(element).next().find('.note-editable').bind('DOMNodeInserted DOMNodeRemoved', updateObservable);
        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var value = ko.unwrap(valueAccessor());
            if (value != $(element).summernote('code')) {
                $(element).summernote('code', value);
            }                
        }
    };

淘汰赛和夏令营不起作用

7 个答案: