4

だから私はサマーノートでノックアウトをうまくプレイさせようとしていますが、実際にはうまくいきません。これは、summernote が<div contenteditable>入力フィールドだけでなく a を使用するためであることに気付きました。

私のバインディングはこれです：

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

明らかにノックアウトは contenteditable だけではうまく機能しません。

4

7 に答える 7

3

私は実際にこれについてもう少し考え始め、Google には他に何もなかったので、独自のソリューションを投稿することにしました。私がしたことは、上記のバインディングを次のように変更することだけでした:

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

オブザーバブルを更新するには、blur / focus / keypress / keyrelease イベントを監視するだけで十分でした。完璧ではありませんが、機能します。

于 2014-05-02T19:54:29.740 に答える
3

私は次の双方向バインディングを使用していますが、それは私にとってはうまくいきます...

ノックアウト バインディング (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>
于 2014-05-17T01:21:40.543 に答える
3

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);
                }
            }
        });
    }
};
于 2015-05-28T04:15:51.940 に答える
2

以前の回答に対するマイナーな修正と変更:

  1. ツールバーを使用すると、特定のケースで表示されるグリッチがあります。これを修正するには、blur イベントによって発生した更新をブロックする必要があります。
  2. また、要素の「summerOptions」プロパティを介してオプションをオーバーライドする機能も追加されました。

これが私の更新です：

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>
于 2014-10-17T13:04:00.583 に答える
0

このソリューションを使用してください、それは私のために働きます

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);
            }                
        }
    };
于 2018-07-27T19:14:13.237 に答える