WangEditor リッチ テキスト コンポーネントを Angular でカプセル化する方法

'@angular/core' から { Component、ElementRef、EventEmitter、Input、OnDestroy、OnInit、Output、ViewChild、ViewEncapsulation } をインポートします。
'@angular/forms' から ControlValueAccessor をインポートします。

「wangeditor」からEをインポートします
'highlight.js' から hljs をインポートします
「node_modules/highlight.js/styles/xcode.css」をインポートします。

@成分（{
  セレクター: 'q-wang-editor',
  テンプレート URL: './q-wang-editor.component.html',
  スタイルURL: [
    './q-wang-editor.component.less',
    '../../../../../node_modules/highlight.js/styles/xcode.css'],
  カプセル化: ViewEncapsulation.None、
})
エクスポートクラス QWangEditorComponent は OnInit、ControlValueAccessor、OnDestroy を実装します {

  @ViewChild("王")
  エディター!: ElementRef;

  @Input() 値: 文字列 = '';

  @Input() 高さ = 300;

  @Output() 値の変更 = 新しい EventEmitter();

  onChange: ((値: 文字列) => {}) | 未定義;

  html = ''

  wangEditor: E | 未定義;

  コンストラクタ() { }
  ngOnDestroy(): void {
    this.wangEditor?.destroy();
  }
  書き込み値(obj: 任意): void {
    .html をコピーします。
    this.wangEditor?.txt.html(this.html)
  }
  変更時に登録(fn: any): void {
  }
  タッチ時に登録(fn: any): void {
  }

  ngOnInit(): void {
    タイムアウトを設定する(() => {
      this.wangEditor = 新しい E(this.editor.nativeElement)
      this.wangEditor.config.zIndex = 500;
      this.wangEditor.config.height = this.height
      this.wangEditor.highlight = hljs;
      this.wangEditor.config.onchange = (html: 任意) => {
        this.valueChange.emit(html)
        （変更後）の場合
          html の変更をこのメソッドで保存します。
        }
      }
      this.wangEditor.config.onchangeTimeout = 500;
      この.wangEditor.create();
      this.wangEditor.txt.html(this.html)
    }, 200);
  }

}