jwysiwyg 文本区域的剔除绑定处理程序

发布于 2025-01-02 17:55:02 字数 1963 浏览 1 评论 0原文

所以我注意到 knockout js 与 jQuery jwysiwyg 插件不能很好地配合。

阅读此博客文章后: http:// www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html 这个答案: 如何使用 jQuery 检测对使用 jWYSIWYG 插件的文本区域内容的更改?

我编写了以下绑定处理程序:

    ko.bindingHandlers.wysiwyg = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().wysiwygOptions || {};
        var value = ko.utils.unwrapObservable(valueAccessor());
        var $e = $(element);
        $.extend(true, {
            initialContent : value
        }, options);

        $e.wysiwyg(options);

        //handle the field changing
        function detectFn() {
            var observable = valueAccessor();
            var newvalue = $e.wysiwyg("getContent");
            observable(newvalue);
        }

        var current = $e.wysiwyg('document');
        var timer;
        current.bind({    
            keyup: function(){
                clearTimeout(timer);
                timer = setTimeout(detectFn, 1000);
            }
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $e.wysiwyg('destroy');
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).wysiwyg("setContent", value);
        ko.bindingHandlers.value.update(element, valueAccessor);
    }
};

像这样使用:

<textarea data-bind="wysiwyg: yourViewModelValue"></textarea>

到目前为止它正在工作我,任何意见将不胜感激。

我认为这对于任何想要让 kockout js 和 jwysiwyg 一起绑定 textarea 元素的人来说都是有用的。

So I noticed knockout js doesn't play well with jQuery jwysiwyg plugin.

After reading this blog post: http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html
And this SO answer: How to detect a change with jQuery to the contents of a textarea that's using jWYSIWYG plugin?

I wrote the following binding handler:

    ko.bindingHandlers.wysiwyg = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().wysiwygOptions || {};
        var value = ko.utils.unwrapObservable(valueAccessor());
        var $e = $(element);
        $.extend(true, {
            initialContent : value
        }, options);

        $e.wysiwyg(options);

        //handle the field changing
        function detectFn() {
            var observable = valueAccessor();
            var newvalue = $e.wysiwyg("getContent");
            observable(newvalue);
        }

        var current = $e.wysiwyg('document');
        var timer;
        current.bind({    
            keyup: function(){
                clearTimeout(timer);
                timer = setTimeout(detectFn, 1000);
            }
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $e.wysiwyg('destroy');
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).wysiwyg("setContent", value);
        ko.bindingHandlers.value.update(element, valueAccessor);
    }
};

use like this:

<textarea data-bind="wysiwyg: yourViewModelValue"></textarea>

so far it's working for me, any comments will be appreciated.

I think this can be of use for anyone looking into getting kockout js and jwysiwyg working together on binding the textarea element.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文