



下載本文檔
版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
第Angular封裝WangEditor富文本組件的方法富文本組件是web程序中很常用的一個(gè)組件,特別是要開發(fā)一個(gè)博客,論壇這類的網(wǎng)站后臺。
得益于Angular的強(qiáng)大,封裝WangEditor組件非常簡單
1.使用yarn或者npm安裝wangeditor
yarnaddwangeditor
2.創(chuàng)建一個(gè)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操作。實(shí)現(xiàn)ControlValueAccessor,讓這個(gè)組件支持Angular的表單驗(yàn)證。實(shí)現(xiàn)ngOnDestroy,組件在銷毀的時(shí)候,調(diào)用WangEditor的destory
4.使用組件
q-wang-editor[height]=550
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 蕭山區(qū)標(biāo)準(zhǔn)鋁棒管理辦法
- 薪酬管理委員會(huì)管理辦法
- 蜀山區(qū)鎮(zhèn)園街村管理辦法
- 衡水市公共廁所管理辦法
- 裝修房質(zhì)量管理辦法細(xì)則
- 西安市停車分類管理辦法
- 規(guī)范基金會(huì)財(cái)務(wù)管理辦法
- 設(shè)計(jì)院工程報(bào)價(jià)管理辦法
- 貢井區(qū)礦產(chǎn)開采管理辦法
- 財(cái)政管理信托基金管理辦法
- 吉林省2025年初中學(xué)業(yè)水平考試(中考)語文真題試卷(含答案)
- 山西煙草專賣局考試題庫2024
- 全員安全生產(chǎn)責(zé)任制度建立
- 生物老師考試真題及答案
- 提升服務(wù)力培訓(xùn)
- 2025至2030中國電容耦合隔離器行業(yè)發(fā)展趨勢分析與未來投資戰(zhàn)略咨詢研究報(bào)告
- 體育社會(huì)學(xué)(高教版)第十章《社會(huì)體育的社會(huì)學(xué)分析》
- 2025-2030年中國校準(zhǔn)即服務(wù)行業(yè)市場現(xiàn)狀供需分析及投資評估規(guī)劃分析研究報(bào)告
- 中醫(yī)藥法課件圖片高清
- 俄語必修說課課件
評論
0/150
提交評論