ember.js - Ember 值绑定(bind)到Redactor所见即所得

我正在使用Redactor所见即所得(WYSIWYG)编辑器，它允许您在初始化其代码之前使用最少的标记，如下所示:

<textarea id="redactor" name="content">
…
</textarea>

但是，在初始化期间，Redactor将使用以下内容包装此textarea:

<div class="redactor_box">
  <div class="redactor_ redactor_editor" contenteditable="true" dir="ltr">
    …
  </div>
  <textarea id="redactor" name="content" style="display: none;">
    …
  </textarea>
</div>

我目前在Ember中已完成此操作

模板:

{{ view App.RedactorView valueBinding='contentAttributes.headerContent' class='header-redactor' name='headerContent' }}

查看扩展的Ember.TextArea:

App.RedactorView = Ember.TextArea.extend({
  didInsertElement: function() {
    $("#"+this.elementId).redactor();
  }
});

它仍然拥有对textarea的绑定(bind)(现已隐藏)，但是我现在需要绑定(bind)redactor_editor类。我怎样才能做到这一点？

最佳答案

在深入研究Redactor代码后，我发现，如果要用作编辑器的元素不是textarea元素，则Redactor会做相反的事情，如果您使用的是textarea，则添加div。

更新了我的 View 并根据Ember.TextArea和Ember.TextSupport的代码对其进行了调整，以便它可以获取正确的值，如果您也使用启用了contenteditable的元素，则此方法可能会正常工作。

App.RedactorView = Ember.View.extend({
  tagName: 'div',
  init: function() {
    this._super();

    this.on("focusOut", this, this._elementValueDidChange);
    this.on("change", this, this._elementValueDidChange);
    this.on("paste", this, this._elementValueDidChange);
    this.on("cut", this, this._elementValueDidChange);
    this.on("input", this, this._elementValueDidChange);
  },
  _updateElementValue: Ember.observer(function() {
    var $el, value;
    value = Ember.get(this, "value");
    $el = this.$().context;
    if ($el && value !== $el.innerHTML) {
      return $el.innerHTML = value;
    }
  }, "value"),
  _elementValueDidChange: function() {
    var $el;
    $el = this.$().context;
    return Ember.set(this, "value", $el.innerHTML);
  },
  didInsertElement: function() {
    this.$().redactor();
    this._updateElementValue();
  }
});

这是一个演示它的JSBin:http://emberjs.jsbin.com/cefebepa/1/edit