与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)