• 售前

  • 售后

热门帖子
入门百科

Angular封装WangEditor富文本组件的方法

[复制链接]
Aim_yuan 显示全部楼层 发表于 2021-8-14 14:37:32 |阅读模式 打印 上一主题 下一主题
  1. 富文本组件是web程序中很常用的一个组件,特别是要开发一个博客,论坛这类的网站后台。
复制代码
得益于Angular的强盛,封装WangEditor组件非常简朴
1.利用yarn大概npm安装wangeditor
  1. yarn add wangeditor
复制代码
2.创建一个Angular的组件
  1. ng g c q-wang-editor
复制代码
3.封装组件逻辑
3.1 模板
  1. <div #wang></div>
复制代码
3.2 ts逻辑
  1. import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
  2. import { ControlValueAccessor } from '@angular/forms';
  3. import E from "wangeditor"
  4. import hljs from 'highlight.js'
  5. import "node_modules/highlight.js/styles/xcode.css"
  6. @Component({
  7.   selector: 'q-wang-editor',
  8.   templateUrl: './q-wang-editor.component.html',
  9.   styleUrls: [
  10.     './q-wang-editor.component.less',
  11.     '../../../../../node_modules/highlight.js/styles/xcode.css'],
  12.   encapsulation: ViewEncapsulation.None,
  13. })
  14. export class QWangEditorComponent implements OnInit, ControlValueAccessor,OnDestroy {
  15.   @ViewChild("wang")
  16.   editor!: ElementRef;
  17.   @Input() value: string = '';
  18.   @Input() height = 300;
  19.   @Output() valueChange = new EventEmitter();
  20.   onChange: ((value: string) => {}) | undefined;
  21.   html = ''
  22.   wangEditor: E | undefined;
  23.   constructor() { }
  24.   ngOnDestroy(): void {
  25.     this.wangEditor?.destroy();
  26.   }
  27.   writeValue(obj: any): void {
  28.     this.html = obj;
  29.     this.wangEditor?.txt.html(this.html)
  30.   }
  31.   registerOnChange(fn: any): void {
  32.   }
  33.   registerOnTouched(fn: any): void {
  34.   }
  35.   ngOnInit(): void {
  36.     setTimeout(() => {
  37.       this.wangEditor = new E(this.editor.nativeElement)
  38.       this.wangEditor.config.zIndex = 500;
  39.       this.wangEditor.config.height = this.height
  40.       this.wangEditor.highlight = hljs;
  41.       this.wangEditor.config.onchange = (html: any) => {
  42.         this.valueChange.emit(html)
  43.         if (this.onChange) {
  44.           this.onChange(html);
  45.         }
  46.       }
  47.       this.wangEditor.config.onchangeTimeout = 500;
  48.       this.wangEditor.create();
  49.       this.wangEditor.txt.html(this.html)
  50.     }, 200);
  51.   }
  52. }
复制代码
大抵思绪:
       
  • 利用ViewChild引用html的dom元素   
  • 在OnInit的成功后,初始化WangEditor编辑器,把模板中的ElementRef放入到WangEditor的容器中去,让WangEditor去控制界面的dom利用。   
  • 实现ControlValueAccessor,让这个组件支持Angular的表单验证。   
  • 实现ngOnDestroy,组件在销毁的时间,调用WangEditor的destory
4.利用组件
  1. <q-wang-editor [height]="550"></q-wang-editor> 
复制代码
5.结果预览

6.末了
一个WangEditor的Angular组件封装就根本完成了。如果必要更多功能,好比图片上传,等可以再根据自己的需求增长功能即可
到此这篇关于Angular封装WangEditor富文本组件的文章就先容到这了,更多相干Angular WangEditor富文本组件内容请搜刮脚本之家从前的文章或继续欣赏下面的相干文章希望大家以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作