Wysiwyg與Angular2和雙向綁定

我需要如何使用所見即所得編輯器（在我的情況下，特別是CKEditor）運行雙向綁定的建議。數據正確加載到編輯器中，但是當我修改文本時，請不要在模型中立即顯示。我嘗試手動調用事件（更改，onchange，按鍵，鍵控，textInput等），並失敗。Wysiwyg與Angular2和雙向綁定

CKEditor的指令：

import {Directive, ElementRef} from "angular2/core"; 

@Directive({ 
    selector: 'textarea.cke-editor' 
}) 

export class CkePlugin{ 
    constructor(elementRef:ElementRef) { 
     CKEDITOR.replace(elementRef.nativeElement); 
    } 
}

組件：

import {Component} from "angular2/core"; 
import {RouterLink} from 'angular2/router'; 
import {ProductEntity} from "../../../entity/product.entity"; 
import {ProductProvider} from "../../../providers/product.provider"; 
import {CkePlugin} from "../../../plugins/cke.plugin"; 

@Component({ 
    templateUrl: '/templates/productshopdetailbasic', 
    directives: [RouterLink, CkePlugin] 
}) 

export class ProductShopDetailBasicComponent{ 

    product:ProductEntity; 

    private _productProvider:ProductProvider; 

    constructor(productProvider:ProductProvider){ 
     this.product = productProvider.product; 
     this._productProvider = productProvider; 
    } 
    saveProduct(){ 
     this._productProvider.saveChanges(); 
    } 
}

模板：

  <div class="form-group"> 
       <label class="col-sm-2 control-label">Description</label> 
       <div class="col-sm-7"> 
        <textarea 
        cols="80" 
        id="editor1" 
        name="editor1" 
        rows="10" 
        class="cke-editor" 
        [(ngModel)]="product.productShop.description" 
        ngControl="description" #description="ngForm" 
        > 
        </textarea> 
       </div> 
      </div>

來源

2016-01-24 JaSHin

CKEDITOR.replace（elementRef.nativeElement）''做了什麼？看起來很激進。 –

它初始化元素CKeditor（並刷新元素的innterHTML） – JaSHin

.replace（）是初始化CKEditor的默認方式 – JaSHin

我發現了一個soluti但不好。如果有人想幹淨地做，我很歡迎。

import {Directive, ElementRef, EventEmitter, OnInit} from "angular2/core"; 

@Directive({ 
    selector: 'textarea.cke', 
}) 

export class CkePlugin implements OnInit{ 


    private _elementRef:ElementRef; 
    private _editor; 
    private _valueChange = new EventEmitter(); 

    constructor(elementRef:ElementRef) { 
     this._elementRef = elementRef; 
     this._editor = CKEDITOR.replace(this._elementRef.nativeElement); 

     //Total s**t 
     this._elementRef.nativeElement.style.visibility = 'visible'; 
     this._elementRef.nativeElement.style.display = 'inline'; 
     this._elementRef.nativeElement.style.setProperty("display", "inline", "important"); 
     this._elementRef.nativeElement.style.setProperty("visibility", "visible", "important"); 
     this._elementRef.nativeElement.style.setProperty("width", "0px", "important"); 
     this._elementRef.nativeElement.style.setProperty("height", "0px", "important"); 
     this._elementRef.nativeElement.style.setProperty("background", "none", "important"); 
     this._elementRef.nativeElement.style.setProperty("border", "none", "important"); 
     this._elementRef.nativeElement.style.setProperty("opacity", "0", "important"); 

     this._valueChange.subscribe(res => { 

      var focused = document.activeElement; 
      $(this._elementRef.nativeElement).focus(); 
      $(this._elementRef.nativeElement).val(res); 
      var textEvent = document.createEvent('TextEvent'); 
      textEvent.initTextEvent ('textInput', true, true, null, "\0", 9, "en-US"); 
      this._elementRef.nativeElement.dispatchEvent(textEvent); 
      $(focused).focus(); 

     }); 
    } 

    ngOnInit():any { 
     var base = this; 
     this._editor.on('change', function(){ 
      base._valueChange.emit(base._editor.getData()); 
     }); 
    } 


}

來源

2016-01-26 08:07:30 JaSHin

Wysiwyg與Angular2和雙向綁定

回答

相關問題