Question

我一直在关注此视频：https://www.youtube.com/watch?v=0IXelrVEoWI和相应的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";
  }

我已将描述硬编码为＆＃34; asd＆＃34;用于测试目的。

我的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

UPDATED 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将引用setup函数的上下文。设置完成后，您没有为在EditorComponent中定义的editor变量分配任何内容（但在setup函数之外）。

当您尝试引用editor方法中的ngOnChanges变量时，它现在引用EditorComponent中的变量，但由于您从未初始化它，因此其值为undefined。< / p>

编辑：

如果您有元素的ID（正如您在某个组件的变量中看到的那样），您可以使用tinymce.get()并将原始文本区域的ID传递给它 - 这应该为您提供特定的TinyMCE实例ID。

我相信你可以这样做：

tinymce.get(this.elementId)

用angular2实现tinymce

1 个答案: