Ember valueBinding to 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，则会添加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

Answer 2

我使用的是Ember + Foundation，kroofy的解决方案对我来说很有吸引力。

contentEditable的高度是在没有填充的情况下加载的(缺少一个段落)，所以我更改为redactor的insertHtml方法来更新值。

发自：

return $el.innerHTML = value;

至：

return this.$().redactor('insertHtml', value);

谢谢你，克莱夫。

Answer 3

首先，当您想要访问Ember View的DOM元素时，您应该使用以下代码：

this.$()

而不是

$("#"+this.elementId)

关于Redactor的问题。我不确定将Ember代码与WYSIWYG编辑器的功能捆绑在一起是否明智，但如果你下定决心，你可以这样做：

App.RedactorView = Ember.TextArea.extend({
  didInsertElement: function() {
    var box = this.$().closest('.' + this.elementId + '_box');
    box.find('.' + this.elementId + '_redactor_editor').redactor();
  }
});