淘汰赛和summernote不起作用

Posted

技术标签:

【中文标题】淘汰赛和summernote不起作用【英文标题】:knockout and summernote not working 【发布时间】:2014-06-19 14:20:56 【问题描述】:

所以我试图让淘汰赛与summernote 一起玩得很好,但这并没有真正奏效。我意识到这是因为summernote 使用<div contenteditable> 而不仅仅是一个输入字段。

我的绑定是这样的:

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

显然,仅使用 contenteditable 淘汰赛效果不佳,那我该怎么办?

【问题讨论】:

【参考方案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,所以我的事件列表有点不同。而且我的绑定处理程序不是“summernote”,以便在将来更灵活地进行更改。这只是所见即所得。 YMMV

【讨论】:

伙计,非常感谢。真的帮了我很多。看到你的回答后我才意识到我没有更新功能。【参考方案2】:

实际上,我开始考虑更多,并决定发布我自己的解决方案,因为 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 事件就足以更新 observables。它并不完美,但它确实有效。

【讨论】:

【参考方案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>

【讨论】:

我当然更喜欢这样的双向绑定。这是否也允许您设置初始值? 初始值是什么意思?首次将绑定应用于元素时会调用更新方法,因此它将从您的可观察变量中设置 Summernote 编辑器的代码。检查以下 JSFiddle 示例 - jsfiddle.net/uL9cg/1 最佳解决方案。只是在javascript中使用它。谢谢你,Jookyn!【参考方案4】:

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

【讨论】:

【参考方案5】:

对先前答案的小修复和更改:

    在使用工具栏的某些情况下会出现故障。要解决此问题,必须在通过模糊事件发生时阻止更新。 还添加了通过元素上的“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>

【讨论】:

谢谢。不幸的是,我不再走这条路了,但我很感激修复! 这段代码中的模糊事件检查导致summernote错过了对我们观察的更新。仍然不确定为什么,但我们禁用了它。 YMMV。【参考方案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);
        
   
  );
 
;

【讨论】:

【参考方案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);
                            
        
    ;

【讨论】:

以上是关于淘汰赛和summernote不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Summernote 字体系列和颜色不起作用

Summernote 上传图片:onImageUpload 和 sendFile 功能不起作用

summernote 图片上传和替代不起作用

summernote 拖放选项不起作用

Summernote 图像上传在 codeigniter 中不起作用

我正在使用 Summernote。使用 Jquery focusout() 作为它的 div 但它不起作用