Angular Froala角度文本编辑器（v3）-在输入更改时销毁并重新初始化

我正在创建一个可重用的Angular组件，在Angular应用程序中渲染Froala文本编辑器需要付费。我在组件第一次渲染初始化方面做了很多工作，但我试图解释一些组件输入在组件初始化后的变化，然后根据这些输入重新初始化文本编辑器（这会导致文本编辑器选项的变化）

这是我正在尝试的，它同样适用于初始渲染，但在以后更改输入时不起作用（我在初始渲染5秒后将

characterCountMax

更改为新值）。他们的原始javascript库中的这个角度集成（）的文档非常简单，没有涉及到这一点，所以我希望其他人也做过

组件模板：

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

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;
      }
    }
  }
}

组件TS:

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

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;
      }
    }
  }
}

从'@angular/core'导入{Component，OnInit，Input，OnChanges，SimpleChanges}；
从“/文本编辑器选项”导入{TextEditorOptions}；
从“./text编辑器工具栏按钮.enum”导入{TextEditorToolbarButtons，defaultTextEditorToolbarButtons}；
@组成部分({
选择器：“应用程序文本编辑器”，
templateUrl:'./text editor.component.html'，
样式URL:['./文本编辑器.component.css']
})
导出类TextEditorComponent实现OnInit、OnChanges{
@Input（）占位符文本='在此处插入文本…'；
@Input（）showCharacterCount=false；
@Input（）characterCountMax=1000；
@输入（）高度最小值=300；
@Input（）工具栏按钮：数组=defaultTextEditorToolbarButtons；
公共编辑选项：文本编辑选项；
公共信息初始化=正确；
私人控制：任何；
构造函数（）{}
恩戈尼尼特（）{
this.updateEditorOptions（）；
}
ngOnChanges（更改：SimpleChanges）{
this.updateEditorOptions（）；
}
公共初始化（initControls:any）{
log（'initialized'）；
this.froalaControl=initControls；
if（此.froalaControl）{
this.froalaControl.initialize（）；
}
}
公共onContentChanged（文本：字符串）{
console.log（文本）；
}
私有更新编辑器选项（）{
如果（！this.toolbarbutions）{
this.toolbarbutions=defaulttexteditorboolbuttons；
}
this.editorOptions={
占位符文本：此。占位符文本，
归因：假，
CharCountCount:this.showCharacterCount，
charCounterMax:this.characterCountMax，
heightMin:这个，heightMin，
toolbarButtons:this.toolbarButtons，
Toolbar按钮XS:this.Toolbar按钮，
toolbarButtonsSM:这个。toolbarButtons，
toolbarButtonsMD:this.toolbarButtons
};
if（此.froalaControl）{
const editor=this.froalaControl.getEditor（）；
如果（编辑）{
this.i初始化=错误；
if（editor.opts）{
editor.opts=Object.assign（editor.opts，this.editorOptions）；
}
this.froalaControl.destroy（）；
this.initialize（this.froalaControl）；
this.isInitialized=真；
}
}
}
}

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

<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();
}}

@输入（）
公共集语言（语言：字符串）{
this.languageVal=语言；
//初始化后语言更改时（选项已设置）
//我们需要销毁FroalEditor并再次初始化它
if（this.options&&this.froalaControl）{
this.options.language=语言；
const editor=this.froalaControl.getEditor（）；
如果（编辑）{
this.i初始化=错误；
this.froalaControl.destroy（）；
//需要延迟才能让froala编辑器完成销毁
设置超时（（）=>{
if（editor.opts）{
editor.opts=this.options；
}
this.initialize（this.froalaControl）；
this.isInitialized=真；
}, 100);
}
}}
公共初始化（初始化控件）{
this.froalaControl=initControls；
if（此.froalaControl）{
this.froalaControl.initialize（）；
}}