The rich text component is a very commonly used component in web programs, especially to develop a website background such as a blog and forum.

Thanks to the power of Angular, it is very simple to encapsulate the WangEditor component

1. Install wangeditor using yarn or npm

yarn add wangeditor 
复制代码

2. Create an Angular component

ng g c q-wang-editor
复制代码

3. Encapsulate component logic

3.1 Template

<div #wang></div>
复制代码

3.2 ts logic

import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';

import E from "wangeditor"
import hljs from 'highlight.js'
import "node_modules/highlight.js/styles/xcode.css"

@Component({
  selector: 'q-wang-editor',
  templateUrl: './q-wang-editor.component.html',
  styleUrls: [
    './q-wang-editor.component.less',
    '../../../../../node_modules/highlight.js/styles/xcode.css'],
  encapsulation: ViewEncapsulation.None,
})
export class QWangEditorComponent implements OnInit, ControlValueAccessor,OnDestroy {

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

  @Input() value: string = '';

  @Input() height = 300;

  @Output() valueChange = new EventEmitter();

  onChange: ((value: string) => {}) | undefined;

  html = ''

  wangEditor: E | undefined;

  constructor() { }
  ngOnDestroy(): void {
    this.wangEditor?.destroy();
  }
  writeValue(obj: any): void {
    this.html = obj;
    this.wangEditor?.txt.html(this.html)
  }
  registerOnChange(fn: any): void {
  }
  registerOnTouched(fn: any): void {
  }

  ngOnInit(): void {
    setTimeout(() => {
      this.wangEditor = new E(this.editor.nativeElement)
      this.wangEditor.config.zIndex = 500;
      this.wangEditor.config.height = this.height
      this.wangEditor.highlight = hljs;
      this.wangEditor.config.onchange = (html: any) => {
        this.valueChange.emit(html)
        if (this.onChange) {
          this.onChange(html);
        }
      }
      this.wangEditor.config.onchangeTimeout = 500;
      this.wangEditor.create();
      this.wangEditor.txt.html(this.html)
    }, 200);
  }

}

复制代码

General idea:

Use ViewChild to reference html's dom element
After the success of OnInit, initialize the WangEditor editor, put the ElementRef in the template into the container of WangEditor, and let WangEditor control the dom operation of the interface.
Implement ControlValueAccessor to make this component support Angular's form validation.
Implement ngOnDestroy, when the component is destroyed, call the destroy of WangEditor

4. Use Components

<q-wang-editor [height]="550"></q-wang-editor>	
复制代码

5. Effect preview

6. Finally

An Angular component encapsulation of WangEditor is basically completed. If you need more functions, such as image uploading, you can add functions according to your own needs.

Welcome everyone to pay attention to my public account [Qingcheng classmates] and communicate with me

Angular encapsulates WangEditor rich text components