Angular WangEditor 부 텍스트 구성 요 소 를 패키지 하 는 방법

부 텍스트 구성 요 소 는 웹 프로그램 에서 자주 사용 되 는 구성 요소 입 니 다.특히 블 로그,포럼 같은 사이트 배경 을 개발 해 야 합 니 다.
Angular 의 강력 함 덕분에 WangEditor 구성 요 소 를 봉인 하 는 것 은 매우 간단 합 니 다.
1.원사 또는 npm 로 wangeditor 설치
yarn add wangeditor
2.Angular 구성 요소 만 들 기
ng g c q-wang-editor
3.패키지 구성 요소 논리
3.1 템 플 릿

3.2 ts 논리

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

}

대체적인 사고방식:

ViewChild 를 사용 하여 html 의 dom 요 소 를 참조 합 니 다

OnInit 의 성공 후 WangEditor 편집 기 를 초기 화하 고 템 플 릿 에 있 는 Element Ref 를 WangEditor 용기 에 넣 어 WangEditor 로 하여 금 인터페이스의 dom 작업 을 제어 하 게 합 니 다

controlValueAccessor 를 실현 하여 이 구성 요소 가 Angular 의 폼 검증 을 지원 하도록 합 니 다

ngOnDestroy 를 실현 하고 구성 요 소 를 소각 할 때 WangEditor 의 destory 를 호출 합 니 다

4.구성 요소 사용
 
5.효과 미리 보기

6.마지막
WangEditor 의 Angular 구성 요소 패키지 가 거의 완성 되 었 습 니 다.만약 에 더 많은 기능 이 필요 하 다 면 예 를 들 어 사진 업로드 등 은 자신의 수요 에 따라 기능 을 추가 하면 된다.
Angular 패키지 WangEditor 부 텍스트 구성 요소 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.Angular WangEditor 부 텍스트 구성 요소 에 관 한 더 많은 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!