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 は逆のことを行い、代わりにtextareaa を使用して 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

于 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 ビューの 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 に答える