Реализация TinyMCE с angular2

Question

Я был после этого видео: https://www.youtube.com/watch?v=0IXelrVEoWI и источник corrosponding GitHub: https://github.com/tabvn/angular-blog

Он отлично работает для создания нового контента, но I'am сталкивается с некоторыми проблемами при попытке загрузить и редактировать существующий контент в том же редакторе.

Мой 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"; 
    } 

Я HARDCODED описание на "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

Я считаю, что этот вопрос является использование вами this в вашей попытке ссылаться на переменную editor. В функции настройки вы сделаете это задание:

this.editor = editor; 

... Я считаю, что this внутри этой функции будет относиться к контексту функции настройки. Когда настройка выполняется, вы ничего не назначили своей переменной editor, которая определена в EditorComponent (но вне функции настройки).

Когда вы попробуете ссылаться на переменную editor в методе ngOnChanges его прямо сейчас со ссылкой на переменную в вашем EditorComponent, но так как вы никогда не инициализируются его его значение является undefined.

EDIT:

Если у вас есть идентификатор элемента (как представляется, в одной из переменных вашего компонента), вы можете использовать tinymce.get() и передать его идентификатор исходного текстового поля - что вы должны получить конкретный TinyMCE экземпляр для этого идентификатора.

Я считаю, что вы можете сделать что-то вроде этого:

tinymce.get(this.elementId)