エンバーvalueBinding

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> 

私は現在、エンバーでこれを行っている

テンプレート：

{{ 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要素ではなく、逆のことを行い、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

まず、あなたはエンバービューのDOM要素にアクセスしたい場合、あなたはこの使用する必要があります。代わりのredactorの問題について

$("#"+this.elementId) 

の

this.$() 

を...私はどのように確認していませんWYSIWYGエディタの機能でEmberコードを結びつけるのが賢明ですが、それについて決定された場合は、次の操作を行うことができます：

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

Answer 3

私はエンバー+基金を使っていて、kroofyのソリューションは、私にとっては魅力のように働きました。

contentEditableの高さがパディングなしで（段落がないため）読み込まれていたため、値を更新するためにiveがredactorのinsertHtmlメソッドに変更されました。

から：

return $el.innerHTML = value; 

へ：

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

おかげでkroofy。