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启用的元素，这可能会正常工作。< / p>

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);

谢谢kroofy。

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();
  }
});

Ember value绑定到Redactor WYSIWYG

3 个答案: