엠버 valueBinding 편집자 WYSIWYG

나는 편집자 WYSIWYG 편집기를 사용하고 있는데 당신이 이런 식으로 해당 코드를 초기화하기 전에 최소한의 마크 업을 사용할 수 있습니다에 :엠버 valueBinding 편집자 WYSIWYG

는 초기화 편집자 동안 그러나

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

은 다음과 같은 내용으로이 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.TextArea을 확장

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

보기 :

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

이 여전히 상기 textarea (지금 숨김)에 바인딩을 보유하고 있지만, 지금은 대신 redactor_editor 클래스를 결합해야합니다. 어떻게해야합니까? 당신은 엠버보기의 DOM 요소를 액세스 할 때

출처

2013-02-04 kroofy

Redactor 코드에서 조금 파고 들자면, 편집자로 지정된 요소가 textarea 요소가 아니라면, Redactor가 역함을 수행하고 예를 들어 div을 사용하는 경우 textarea을 추가한다는 것을 알았습니다.

내보기가 업데이트되어 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-04 15:49:53 kroofy

jsbin에 최신 버전의 ember로 작업 예제를 설치해주십시오. 이 작업을 할 수 없습니다. ( – borisrorsvort

업데이트 된 예제와 JSBin을 확인하십시오. – kroofy

이 최신 버전의 Redactor 일명 v9.2 – Rajat

첫째, 당신이 사용해야

this.$()

대신에 편집자의 문제에 대한

$("#"+this.elementId)

을 ... 나는 어떻게 확실하지 않다 WYSIWYG 편집기의 기능을 사용하여 Ember 코드를 묶는 것이 현명하지만 결정한 경우 다음을 수행 할 수 있습니다.

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

출처

2013-02-04 15:01:06

감사합니다. 나는이 작업을 할 수 있었고 잠시 후에 내 대답을 게시 할 것입니다. – kroofy

것은 내가 엠버 + 파운데이션을 사용하고, 그리고 kroofy의 솔루션은 나를 위해 마법처럼 일했다.

contentEditable의 높이가 패딩없이로드되었으므로 (단락이 누락되었습니다) 값을 업데이트하기 위해 redactor의 insertHtml 메소드로 변경되었습니다.

에서 :

return $el.innerHTML = value;

에 :

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

감사 kroofy.

출처

2014-05-10 23:03:22

엠버 valueBinding 편집자 WYSIWYG

답변

관련 문제