6

我正在使用 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类。我怎样才能做到这一点？

4

3 回答 3

7

在对 Redactor 代码进行一些挖掘之后，我发现如果您的元素注定要成为编辑器而不是textarea元素，那么 Redactor 会做相反的事情并添加textareaif your a using a divinstead 例如。

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

于 2013-02-04T15:49:53.943 回答
3

我正在使用 Ember + Foundation，kroofy 的解决方案对我来说就像一个魅力。

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

从：

return $el.innerHTML = value;

到：

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

谢谢克罗菲。

于 2014-05-10T23:03:22.877 回答
0

首先，当你想访问 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();
  }
});
于 2013-02-04T15:01:06.647 回答