Question

我正在使用这个很棒的编辑器，但我不知道如何将内容绑定到淘汰赛中：

Answer 1

这是一个完成工作的双向绑定处理程序。与此类处理程序一样，update函数将更改从VM传递到UI元素（Redactor元素），init将更改从Redactor传递回VM。

当我发布这个是Redactor 9的时候，我现在已经为Redactor 10更新了它。

ko.bindingHandlers.redactor = {

    init: function(element, valueAccessor) {

        var value = valueAccessor();

        // We only want Redactor to notify our value of changes if the value
        // is an observable (rather than a string, say).

        if (ko.isObservable(value)) {
            $(element).redactor({
                changeCallback: value
            });
        }

    },

    update: function(element, valueAccessor) {

        // New value, note that Redactor expects the argument passed to 'set'
        // to have toString method, which is why we disjoin with ''.

        var value = ko.utils.unwrapObservable(valueAccessor()) || '';

        // We only call 'set' if the content has changed, as we only need to
        // to do so then, and 'set' also resets the cursor position, which
        // we don't want happening all the time.

        // This code would work with Redactor 9, but no longer works with Redactor 10
        //if (value !== $(element).redactor('get')) {
        //    $(element).redactor('set', value);
        //}

        // The API method has become 'code.get', and it behaves a bit differently: it
        // returns formatted HTML, i.e. with whitespace and EOLs.  That means that we
        // would update the Redactor content every time the observable changed, which
        // was bad.  So instead we can use this:
        if (value !== $(element).redactor('core.getTextarea').val()) {
            $(element).redactor('code.set', value );
        }
   }

}

如果要使用Redactor编辑的内容的KO可观察值为content，那么您可以这样做：

<textarea data-bind="redactor: content"></textarea>

要使用Redactor 10进行上述操作，您必须进行一些更改。首先，您必须使用'code.set'和'code.get'，而不是简单地'set'和'get'，以便与HTML进行交互。但是如果你只这样做，你会发现'code.get'

返回的HTML

Answer 2

我不知道是不是正确，但这段代码对我有用：

创建新的绑定处理程序：

    ko.bindingHandlers.imperavi =
    {
            init: function(element, valueAccessor, allBindings)
            {
                var startValue = allBindings().value();
                var $el = $(element);
                $el.val(startValue).change();
                $el.redactor({
                    changeCallback: function(html)
                    {
                        $el.val(html).change();
                    }
                });
            }
    };

在HTML中：

<textarea data-bind="value: Text, imperavi: true"></textarea>

视图模型：

var VM = function()
{
    this.Text = ko.observable('<p>Hello world</p>');
};

var vm = new VM();
ko.applyBindings(vm);

Answer 3

我已经更新了dvijaz的Redactor 10版本以支持新的Redactor 2版本（感谢dvijaz！）：

ko.bindingHandlers.redactor = {

init: function(element, valueAccessor) {

    var value = valueAccessor();

    // We only want Redactor to notify our value of changes if the value
    // is an observable (rather than a string, say).

    if (ko.isObservable(value)) {
        $(element).redactor({ callbacks: { change: value } });
    }

},

update: function(element, valueAccessor) {

    // New value, note that Redactor expects the argument passed to 'set'
    // to have toString method, which is why we disjoin with ''.

    var value = ko.utils.unwrapObservable(valueAccessor()) || '';

    // We only call 'set' if the content has changed, as we only need to
    // to do so then, and 'set' also resets the cursor position, which
    // we don't want happening all the time.

    // This code would work with Redactor 9, but no longer works with Redactor 10
    //if (value !== $(element).redactor('get')) {
    //    $(element).redactor('set', value);
    //}

    // The API method has become 'code.get', and it behaves a bit differently: it
    // returns formatted HTML, i.e. with whitespace and EOLs.  That means that we
    // would update the Redactor content every time the observable changed, which
    // was bad.  So instead we can use this:
    if (value !== $(element).redactor('core.textarea').val()) {
        $(element).redactor('code.set', value);
    }

} }

Answer 4

我喜欢应该能够独立使用knockoutjs和redactorjs的想法。当redactorjs更新textarea时，knockoutjs应该接管并通过它的绑定更新模型。

我发现当textarea发生变化时，redactorjs没有传播更改事件。为了解决这个问题，我手动添加了它：

＆＃13;

$('textarea').each(function() {
  var textareaEl = $(this);
  textareaEl.redactor({
    blurCallback: function() {
      textareaEl.change();
    }
  });
});

＆＃13;

~~这里有改进的余地，因为看起来changeCallback也会在每个关键事件上被触发。~~但是这个解决方案有效并且不会使redactorjs成为你的knockoutjs中的依赖项app（或在redactor版本更改时中断）。

编辑：我在redactorjs的源代码中发现了一个未记录的blurCallback。替换了似乎在keyUp上触发的changeCallback的使用。

如何：redactor.js Knockout.js Binder

4 个答案: