Kor valueBinding Redactor WYSIWYG

Question

Ben Redaktör WYSIWYG editörü kullanıyorum ve seni böyle kodunu başlatılıyor önce asgari işaretlemeyi kullanmaya olanak sağlar:

başlatma Redactor sırasında Ancak

<textarea id="redactor" name="content"> 
… 
</textarea> 

aşağıdaki içeriğe sahip bu textarea kaydırılır :

<div class="redactor_box"> 
    <div class="redactor_ redactor_editor" contenteditable="true" dir="ltr"> 
    … 
    </div> 
    <textarea id="redactor" name="content" style="display: none;"> 
    … 
    </textarea> 
</div> 

Şu anda Ember içinde yapmış

Şablon:

Ember.TextArea uzanan

{{ view App.RedactorView valueBinding='contentAttributes.headerContent' class='header-redactor' name='headerContent' }} 

Görünüm:

App.RedactorView = Ember.TextArea.extend({ 
    didInsertElement: function() { 
    $("#"+this.elementId).redactor(); 
    } 
}); 

Bu hala textarea (şimdi gizli) bağlanarak tutan ama şimdi yerine redactor_editor sınıfını bağlamak gerekir. Bunu nasıl yapabilirim? Eğer Kor View'in DOM öğesine erişmek istediğinizde

Answer 1

Redactor kodunda bir miktar kazma işleminden sonra, elemanınızın bir editör olmak için textarea öğesi olmadığını fark ederseniz, Redactor tersine bir şey yapıp, örneğin'u div'u kullanarak ekler.

Görünümümü güncelleştirdim ve Ember.TextArea ve Ember.TextSupport koduna göre düzeltildi, böylece doğru değeri alırdı, bu da muhtemelen bir contenteditable etkin öğe kullanıyorsanız, iyi çalışır.

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

İşte gösteren bir JSBin var: http://emberjs.jsbin.com/cefebepa/1/edit

Answer 2

Öncelikle, bu kullanmalısınız:

this.$() 

yerine Redaktör sayısında Hakkında

$("#"+this.elementId) 

... Ben nasıl emin değilim WiseIWYG editörünün işlevselliği ile Ember kodunu bağlamak akıllıca olacaktır, ancak bu konuda karar verirseniz, aşağıdakileri yapabilirsiniz:

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

Answer 3

Ben Kor + Foundation kullanıyorum ve kroofy çözümü benim için bir cazibe gibi çalıştı.

contentEditable öğesinin yüksekliği, dolgu olmadan yükleniyordu (bir paragraf eksikti), bu nedenle değeri güncellemek için redaktörün insertHtml yöntemine değiştirdim.

den:

return $el.innerHTML = value; 

için:

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

sayesinde kroofy.