angular - Froala Angular 文本编辑器 (v3) - 在输入更改时销毁并重新初始化

Question

我正在创建一个可重复使用的 Angular 组件，它负责在 Angular 应用程序中呈现 Froala 文本编辑器。我在组件首次渲染初始化方面一切正常，但我试图解释一些组件输入在组件初始化后发生变化，然后销毁然后根据这些输入重新初始化文本编辑器(这会导致更改文本编辑器选项)。

这是我正在尝试的，它再次适用于初始渲染，但在稍后更改输入时不起作用(我正在将 characterCountMax 更改为新值 5 秒在初始渲染之后)。他们原始 javascript 库的这个 Angular 集成 ( https://github.com/froala/angular-froala-wysiwyg#manual-initialization ) 的文档非常简单，没有涵盖这一点，所以我希望其他人已经做到了这一点。

组件模板:

<div [hidden]="!isInitialized" [froalaEditor]="editorOptions" (froalaInit)="initialize($event)" (froalaModelChange)="onContentChanged($event)"></div>

组件 TS:

import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { TextEditorOptions } from './text-editor-options';
import { TextEditorToolbarButtons, defaultTextEditorToolbarButtons } from './text-editor-toolbar-buttons.enum';

@Component({
  selector: 'app-text-editor',
  templateUrl: './text-editor.component.html',
  styleUrls: ['./text-editor.component.css']
})
export class TextEditorComponent implements OnInit, OnChanges {
  @Input() placeholderText = 'Insert text here...';
  @Input() showCharacterCount = false;
  @Input() characterCountMax = 1000;
  @Input() heightMin = 300;
  @Input() toolbarButtons: Array<TextEditorToolbarButtons> = defaultTextEditorToolbarButtons;
  public editorOptions: TextEditorOptions;
  public isInitialized = true;
  private froalaControl: any;

  constructor() { }

  ngOnInit() {
    this.updateEditorOptions();
  }

  ngOnChanges(changes: SimpleChanges) {
    this.updateEditorOptions();
  }

  public initialize(initControls: any) {
    console.log('initializing');
    this.froalaControl = initControls;
    if (this.froalaControl) {
      this.froalaControl.initialize();
    }
  }

  public onContentChanged(text: string) {
    console.log(text);
  }

  private updateEditorOptions() {
    if (!this.toolbarButtons) {
      this.toolbarButtons = defaultTextEditorToolbarButtons;
    }

    this.editorOptions = {
      placeholderText: this.placeholderText,
      attribution: false,
      charCounterCount: this.showCharacterCount,
      charCounterMax: this.characterCountMax,
      heightMin: this.heightMin,
      toolbarButtons: this.toolbarButtons,
      toolbarButtonsXS: this.toolbarButtons,
      toolbarButtonsSM: this.toolbarButtons,
      toolbarButtonsMD: this.toolbarButtons
    };

    if (this.froalaControl) {
      const editor = this.froalaControl.getEditor();
      if (editor) {
        this.isInitialized = false;
        if (editor.opts) {
          editor.opts = Object.assign(editor.opts, this.editorOptions);
        }
        this.froalaControl.destroy();
        this.initialize(this.froalaControl);
        this.isInitialized = true;
      }
    }
  }
}

Answer 1

这是一个示例，我从编辑器外部更改语言。我在编辑器的 destoy 和初始化之间使用了一个超时。

标记

<div class="na-froala-editor" *ngIf="options && isInitialized"
  [froalaEditor]="options"
  (froalaInit)="initialize($event)"
  [froalaModel]="editorContent$ | async"
  (froalaModelChange)="froalaModelChange($event)">
</div>

代码

@Input()
public set language(language: string) {
  this.languageVal = language;

  // When the language change after the initialisation ( option is already set)
  // We need to destroy the froalaEditor and initialize it again
  if (this.options && this.froalaControl) {
    this.options.language = language;
    const editor = this.froalaControl.getEditor();
    if (editor) {
      this.isInitialized = false;
      this.froalaControl.destroy();
      // Delay is necessary to let the froala editor finish to destroy
      setTimeout(() => {
        if (editor.opts) {
          editor.opts = this.options;
        }
        this.initialize(this.froalaControl);
        this.isInitialized = true;
      }, 100);
    }
  }
}

public initialize(initControls) {
  this.froalaControl = initControls;
  if (this.froalaControl) {
    this.froalaControl.initialize();
  }
}