Angular封裝WangEditor富文本組件的方法

第Angular封裝WangEditor富文本組件的方法富文本組件是web程序中很常用的一個組件，特別是要開發(fā)一個博客，論壇這類的網(wǎng)站后臺。

得益于Angular的強(qiáng)大，封裝WangEditor組件非常簡單

1.使用yarn或者npm安裝wangeditor

yarnaddwangeditor

2.創(chuàng)建一個Angular的組件

nggcq-wang-editor

3.封裝組件邏輯

3.1模板

div#wang/div

3.2ts邏輯

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

import{ControlValueAccessor}from@angular/forms

importEfromwangeditor

importhljsfromhighlight.js

importnode_modules/highlight.js/styles/xcode.css

@Component({

selector:q-wang-editor,

templateUrl:./ponent.html,

styleUrls:[

./ponent.less,

../../../../../node_modules/highlight.js/styles/xcode.css],

encapsulation:ViewEncapsulation.None,

exportclassQWangEditorComponentimplementsOnInit,ControlValueAccessor,OnDestroy{

@ViewChild(wang)

editor!:ElementRef;

@Input()value:string=

@Input()height=300;

@Output()valueChange=newEventEmitter();

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=newE(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編輯器，把模板中的ElementRef放入到WangEditor的容器中去，讓W(xué)angEditor去控制界面的dom操作。實現(xiàn)ControlValueAccessor，讓這個組件支持Angular的表單驗證。實現(xiàn)ngOnDestroy，組件在銷毀的時候，調(diào)用WangEditor的destory

4.使用組件

q-wang-editor[height]=550