Angular17版本集成Quill富文本编辑器

Angular17版本集成Quill富文本编辑器

前言:网上找了好多富文本资源,对应Angular17版本的且兼容的太少了,且找到不到对应的版本
自己就去网上找个兼容的免费的富文本组件

1.兼容Angular17版本的quill包

    "@types/quill": "^1.3.10","ngx-quill": "^24.0.0","quill": "^1.3.7","quill-delta": "^5.1.0","quill-image-resize-module": "^3.0.0","rxjs": "^7.5.7",

其中 “rxjs”:需要和 “ngx-quill”: “^24.0.0”,兼容 所以是 ^7.5.7版本

quill-image-resize-module": “^3.0.0”,是图片操作 对图片放大放小

2.引入配置文件

angular.json中需要引入css/js   不在这里引入的话组件会报错

            "scripts": ["node_modules/quill/dist/quill.min.js","node_modules/quill-image-resize-module/image-resize.min.js"]

            "styles": ["node_modules/driver.js/dist/driver.css","node_modules/quill/dist/quill.snow.css"]

要找到位置添加

封装组件

我是在原有的组件上封装的组件,因为涉及到图片上传,和绑定表单数据所以自己就封装个独立组件方便使用

其中html

<div id="editor"></div>

样式:less

#editor {min-height: 400px;max-height: 800px;overflow: auto;
}

ts

import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import Quill from 'quill';
import ImageResize from 'quill-image-resize-module';
// 注册ImageResize模块
Quill.register('modules/imageResize', ImageResize);
@Component({selector: 'app-qu-editor',standalone: true,templateUrl: './qu-editor.component.html',styleUrls: ['./qu-editor.component.less'],providers: [{provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => QuEditorComponent),multi: true}]
})
export class QuEditorComponent implements OnInit, ControlValueAccessor{@Input() uploadDir: string = "pmc/image/project"; // 默认的上传目录quillEditor: any;editorContent: string = '';constructor(private http: HttpClient) {}ngOnInit() {this.initEditor();}initEditor() {this.quillEditor = new Quill('#editor', {theme: 'snow',modules: {toolbar: [[{ 'header': [1, 2, 3, 4, 5, 6, false] }],['bold', 'italic', 'underline', 'strike'],[{ 'list': 'ordered'}, { 'list': 'bullet' }],[{ 'indent': '-1'}, { 'indent': '+1' }],[{ 'size': ['small', false, 'large', 'huge'] }],[{ 'color': [] }, { 'background': [] }],[{ 'align': [] }],['link', 'image', 'video', 'code-block'],['clean']],imageResize: {} // 添加imageResize模块},});this.quillEditor.on('text-change', () => {this.onChange(this.quillEditor.root.innerHTML);});this.quillEditor.getModule('toolbar').addHandler('image', this.imageHandler.bind(this));}imageHandler() {const input = document.createElement('input');input.setAttribute('type', 'file');input.setAttribute('accept', 'image/*');input.click();input.onchange = () => {const file = input.files[0];if (file) {const formData = new FormData();formData.append('file', file);formData.append('dir', this.uploadDir);this.http.post<any>('/pmc/upload', formData).subscribe(res => {if (res.success) {const range = this.quillEditor.getSelection();this.quillEditor.insertEmbed(range.index, 'image', res.data);} else {console.error('Image upload failed: ' + res.msg);}},err => {console.error('Image upload failed: ' + err.message);});}};}writeValue(value: any): void {this.editorContent = value;if (this.quillEditor) {this.quillEditor.root.innerHTML = this.editorContent;}}onChange = (value: any) => {};onTouched = () => {};registerOnChange(fn: any): void {this.onChange = fn;}registerOnTouched(fn: any): void {this.onTouched = fn;}
}

使用:

在表单里面使用:

      <nz-form-item><nz-form-label [nzSpan]="4" nzFor="description">产品描述</nz-form-label><nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="产品描述"><app-qu-editor formControlName="description"></app-qu-editor></nz-form-control></nz-form-item>

可以通过传值修改图片上传路径

也可以通过[ngModel]绑定值