如何使用quill2.0.0-dev.3在angular14中创建表

Question

我的角度项目版本：

"@angular/animations": "^14.2.0",
"@angular/cdk": "^14.2.7",
"@angular/common": "^14.2.0",
"@angular/compiler": "^14.2.0",
"@angular/core": "^14.2.0",
"@angular/forms": "^14.2.0",
"@angular/material": "^14.2.7",
"@angular/platform-browser": "^14.2.0",
"@angular/platform-browser-dynamic": "^14.2.0",
"@angular/router": "^14.2.0"

我已经尝试了quill2.0.0-dev.3创建了一个编辑器，但我仍然无法在工具栏或通过按钮插入表格功能。

这是我的代码：

MyComponent.component.ts

import Quill from 'quill';

export class MyComponent implements OnInit, OnDestroy, AfterViewInit {
  @ViewChild('editor', { static: false }) public editor!:ElementRef;
  private quillInstance: any;

  modules = {
    toolbar: {
      container: [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block', 'image'],
        [{ 'header': 1 }, { 'header': 2 }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],
        [{ 'indent': '-1' }, { 'indent': '+1' }],
        [{ 'direction': 'rtl' }],
        [{ 'size': ['small', false, 'large', 'huge'] }],
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'font': [] }],
        [{ 'align': [] }],
        ['clean'],
        [
          { table: 'TD' },
          { 'table-insert-row': 'TIR' },
          { 'table-insert-column': 'TIC' },
          { 'table-delete-row': 'TDR' },
          { 'table-delete-column': 'TDC' }
        ]
      ],
      handlers: {
        
      }
    },
    table: true
   };
 }

  ngAfterViewInit() {
    this.quillInstance = new Quill(this.editor.nativeElement, {
      theme: 'snow',
      modules: this.modules
    });
    console.log(this.quillInstance)
  }

MyComponent.component.html

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

Answer 1

有专门支持 Angular 的

ngx-quill

包以及大量示例，您可以尝试使用它来获得比

quill

更简单的工具