So kapseln Sie die Rich-Text-Komponente von WangEditor in Angular

importiere { Komponente, ElementRef, EventEmitter, Eingabe, OnDestroy, OnInit, Ausgabe, ViewChild, ViewEncapsulation } von '@angular/core';
importiere { ControlValueAccessor } aus '@angular/forms';

importiere E von „wangeditor“
importiere hljs aus „highlight.js“
importiere "node_modules/highlight.js/styles/xcode.css"

@Komponente({
  Selektor: 'q-wang-editor',
  Vorlagen-URL: "./q-wang-editor.component.html",
  styleUrls: [
    „./q-wang-editor.component.less“,
    '../../../../../node_modules/highlight.js/styles/xcode.css'],
  Kapselung: ViewEncapsulation.None,
})
Exportklasse QWangEditorComponent implementiert OnInit, ControlValueAccessor,OnDestroy {

  @ViewChild("wang")
  Herausgeber!: ElementRef;

  @Input()-Wert: Zeichenfolge = '';

  @Input() Höhe = 300;

  @Output() Wertänderung = neuer EventEmitter();

  beiÄnderung: ((Wert: Zeichenfolge) => {}) | nicht definiert;

  html = ''

  wangEditor: E | nicht definiert;

  Konstruktor() { }
  ngOnDestroy(): void {
    dies.wangEditor?.destroy();
  }
  SchreibeWert(Objekt: beliebig): void {
    dies.html = obj;
    dies.wangEditor?.txt.html(diese.html)
  }
  registerOnChange(fn: any): void {
  }
  registerOnTouched(fn: any): void {
  }

  ngOnInit(): void {
    setzeTimeout(() => {
      dieser.wangEditor = neues E(dieser.editor.nativeElement)
      dies.wangEditor.config.zIndex = 500;
      this.wangEditor.config.height = diese.höhe
      dies.wangEditor.highlight = hljs;
      this.wangEditor.config.onchange = (html: beliebig) => {
        dies.Wertänderung.emit(html)
        wenn (dies.beiÄnderung) {
          dies.onChange(html);
        }
      }
      this.wangEditor.config.onchangeTimeout = 500;
      dies.wangEditor.create();
      dies.wangEditor.txt.html(diese.html)
    }, 200);
  }

}