How to : redactor.js Knockout.js Binder

Question

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

http://imperavi.com/redactor/

Answer 1

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

当我发布这篇文章时，它是为Redactor 9发布的，现在我已经为Redactor10更新了它。

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"one_answers"code.get"，而不是简单的"set"one_answers"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>

ViewModel:

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

Answer 3

我已经更新了dvijaz的Redactor 10版本，以支持新的Redactor2版本（感谢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更新文本区域时，knockoutjs应该接管并通过绑定更新模型。

我发现redactorjs在文本区域更改时不会传播更改事件。为了解决这个问题，我手动添加了它：

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

这里还有改进的空间，因为这似乎在每个关键事件上都会触发回调但这个解决方案有效，不会使redactorjs成为knockoutjs应用程序中的依赖项（或者在redactor版本更改时中断）。

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