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]绑定值