用angular2实现tinymce

Question

我一直在关注这个视频：https://www.youtube.com/watch?v=0IXelrVEoWI and the corrosponding github source: 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

我认为问题在于您在尝试引用 editor 变量时使用了 this。在您的设置功能中，您进行此分配：

this.editor = editor;

...我相信该函数内部的 this 会引用设置函数的上下文。设置完成后运行您还没有为 EditorComponent 中定义的 editor 变量分配任何内容（但在设置函数之外）。

当您随后尝试在 ngOnChanges 方法中引用 editor 变量时，它现在指的是您的 EditorComponent 中的变量，但由于您从未初始化它，因此它的值为 undefined .

编辑：

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

我相信你可以做这样的事情：

tinymce.get(this.elementId)

用angular2实现tinymce

Implementing tinymce with angular2

tinymce

angular