與angular2

Question

實現TinyMCE的我一直在關注這個視頻：https://www.youtube.com/watch?v=0IXelrVEoWI和corrosponding github上源：https://github.com/tabvn/angular-blog

它完美地創造新的內容，但我'嘗試加載和編輯現有的內容時面臨的一些問題在同一個編輯器中。

我的HTML DOM元素看起來是這樣的：

<div class="row"> 
    <div class="form-group col-lg-10"> 
     <label for="description">description:</label> 
     <text-editor [value]="defaultBodyValue" [elementId]="'description'" (onEditorKeyup)="onBodyTextEditorKeyUp($event)"></text-editor> 
    </div> 
    </div> 

在我的部分，我把這種方法從ngOnInit（）：

getDescription(): void { 
    let id; 
    this.route.params.forEach((params: Params) => { 
     id = +params['id']; 
    }) 
    this.descService.getDesc(id).then(desc => this.desc = desc); 
    this.defaultBodyValue = "asd"; 
    } 

我硬編碼的描述爲 「ASD」 爲測試目的。

我editor.component.ts來源是這樣的：

export class EditorComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges { 


    @Input() elementId: string; 
    @Input() value: any = ""; 
    @Output() onEditorKeyup: EventEmitter<any> = new EventEmitter<any>(); 

    baseURL: string = '/'; 

    constructor() { 
    } 


    ngOnInit() { 
    } 


    editor; 

    ngAfterViewInit() { 
    tinymce.init({ 
     selector: '#' + this.elementId, 
     plugins: ['link', 'paste', 'table', 'lists', 'hr', 'emoticons', 'advlist'], 
     skin_url: this.baseURL + 'assets/skins/lightgray', 
     setup: editor => { 
     this.editor = editor; 
     editor.on('keyup',() => { 
      const content = editor.getContent(); 
      this.onEditorKeyup.emit(content); 
     }); 
     }, 
    }); 
    } 

    ngOnDestroy() { 
    tinymce.remove(this.editor); 
    } 


    didSetValue: boolean = false; 


    ngOnChanges(){ 
    console.log(this.value); 
    console.log("TEST: " + this.editor); 
    if(!isNullOrUndefined(this.editor) && this.value !== "" && !this.didSetValue){ 

     console.log(this.value); 
     this.didSetValue = true; 
     this.editor.setContent(this.value); 
    } 
    } 
} 

創建新內容時，它完美，但當我嘗試編輯內容時，它會記錄下到控制檯：

asd 
editor.component.ts:55 TEST: undefined 

修訂ngAfterViewInit（）函數：

ngAfterViewInit() { 
    tinymce.init({ 
     selector: '#' + this.elementId, 
     plugins: ['link', 'paste', 'table', 'lists', 'hr', 'emoticons', 'advlist'], 
     skin_url: this.baseURL + 'assets/skins/lightgray', 
     setup: editor => { 
     editor = editor; 
     editor.on('keyup',() => { 
      const content = editor.getContent(); 
      this.onEditorKeyup.emit(content); 
     }); 
     }, 
    }); 
    } 

Answer 1

我認爲，問題是你的01使用您嘗試引用editor變量。在你的設置功能進行此任務：

this.editor = editor; 

...我相信this該函數內部將引用設置功能的情況下。安裝完成後，您還沒有將任何內容分配給您在EditorComponent中定義的editor變量（但不在setup函數中）。

當您嘗試引用ngOnChanges方法中的editor變量時，它現在引用EditorComponent中的變量，但由於您從未初始化它，因此它的值爲undefined。

編輯：

如果有元素的ID（如您似乎對您的組件的變量之一），你可以使用tinymce.get()並把它傳遞原textarea的ID - 這應該讓你的具體TinyMCE的該ID的實例。

我相信你可以做這樣的事情：

tinymce.get(this.elementId)