Angular封装WangEditor富文本组件

富文本组件是web程序中很常用的一个组件,特别是要开发一个博客,论坛这类的网站后台。

得益于Angular的强大,封装WangEditor组件非常简单

1.使用yarn或者npm安装wangeditor

yarn add wangeditor 

2.创建一个Angular的组件

ng g c q-wang-editor

3.封装组件逻辑

3.1 模板

<div #wang></div>

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编辑器,把模板中的ElementRef放入到WangEditor的容器中去,让WangEditor去控制界面的dom操作。
  • 实现ControlValueAccessor,让这个组件支持Angular的表单验证。
  • 实现ngOnDestroy,组件在销毁的时候,调用WangEditor的destory

4.使用组件

<q-wang-editor [height]="550"></q-wang-editor>	

5.效果预览

image

6.最后

一个WangEditor的Angular组件封装就基本完成了。如果需要更多功能,比如图片上传,等可以再根据自己的需求增加功能即可


欢迎大家关注我的公众号【青城同学】和我交流

image

posted on   快乐海盗  阅读(689)  评论(0编辑  收藏  举报

编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示