Ember value绑定到Redactor WYSIWYG

Question

我正在使用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(现在隐藏),但我现在需要绑定redactor_editor类.我怎样才能做到这一点？

Answer 1

在对Redactor代码进行了一些挖掘之后,我发现如果你的元素注定是一个编辑器不是一个textarea元素,那么Redactor会做相反的事情并添加textarea如果你的a使用a div代替.

更新了我的视图并根据来自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