using in Angular with quill.js, Insert table doesn't work

[xiehongyang]

Hi, soccerloway, I am using quill.js in my angular project, and decide integrate this awesome table component to my project, but after setting configs in my project, the [insert table] function doesn't work as expected. it only generate some <p><br/></p> in my editor, and no error complains Are you saw this problem in before and Could you tell me where is this problem about? Thank you! 🙏

version: "quill": "2.0.0-dev.0", "quill-better-table": "^1.2.4",

[xiehongyang]

And also, this is my component.ts and html code:

app.html

<button (click)="onInsertTable()">Insert table</button>
<div #editable></div>

app.component.ts

import {Component, OnInit, AfterViewInit, ViewChild, ElementRef} from '@angular/core';
import * as quillBetterTable from 'quill-better-table';

declare const Quill: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, AfterViewInit {
  constructor() {
  }

  @ViewChild('editable', {static: true}) editRef: ElementRef;

  quill: any;

  ngOnInit() {
    this.initEditor();
  }

  initEditor(): void {
    Quill.register({
      'modules/better-table': quillBetterTable
    }, true);
    // tslint:disable-next-line:no-unused-expression
    this.quill = new Quill(this.editRef.nativeElement, {
          theme: 'snow',
          modules: {
            table: false,
            'better-table': {
              operationMenu: {
                items: {
                  unmergeCells: {
                    text: 'Another unmerge cells name'
                  }
                },
                color: {
                  colors: ['green', 'red', 'yellow', 'blue', 'white'],
                  text: 'Background Colors:'
                }
              }
            },
            keyboard: {
              bindings: quillBetterTable.keyboardBindings
            }
          }
        }
    );
  }

  ngAfterViewInit() {

  }

  onInsertTable() {
    const tableModule = this.quill.getModule('better-table');
    tableModule.insertTable(3, 3);
  }
}

[soccerloway]

https://stackblitz.com/edit/angular-gxfv1g I tried your code in the environment above. I found it worked as expected when I reference quilljs and quill-better-table both via <script> tags. Then I tried in my local Vue environment, reference quill-better-table via ES6 import. There is an error: The bundle file of quill-better-table has something wrong I think. Could you use script tag to reference quill-better-table for the time being? I will fix this error as soon as possible, Thanks for your report.

[xiehongyang]

@soccerloway after spent a little time, I find out it is the reference problem, So I imitate the way ngx-quill import the quill, it works.

code like this:

import {Component, OnInit, AfterViewInit, ViewChild, ElementRef, NgZone} from '@angular/core';
import * as quillBetterTable from 'quill-better-table';

declare const require: any;
let Quill: any = null;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, AfterViewInit {
  constructor(
      private zone: NgZone,
  ) {
  }

  @ViewChild('editable', {static: true}) editRef: ElementRef;

  quill: any;

  ngOnInit() {
  }

  ngAfterViewInit() {
    if (!Quill) {
      this.zone.runOutsideAngular(() => {   
        Quill = require('quill'); // ----------------> here to import the quill
      });
    }

    Quill.register({
      'modules/better-table': quillBetterTable
    }, true);

    this.zone.runOutsideAngular(() => {
      this.quill = new Quill(this.editRef.nativeElement, {
            theme: 'snow',
            modules: {
              table: false,
              'better-table': {
                operationMenu: {
                  items: {
                    unmergeCells: {
                      text: 'Another unmerge cells name'
                    }
                  },
                  color: {
                    colors: ['green', 'red', 'yellow', 'blue', 'white'],
                    text: 'Background Colors:'
                  }
                }
              },
              keyboard: {
                bindings: quillBetterTable.keyboardBindings
              }
            }
          }
      );
    });
  }

  onInsertTable() {
    const tableModule = this.quill.getModule('better-table');
    tableModule.insertTable(3, 3);
  }
}

Thanks for your replay and support, really awesome Table!

[Fredxingxing]

i use react and react-quill meet the same question, thx a lot.

[akshaya-a-p]

Im facing the same issue in react app. Can I get help in resolving this issue. Thank you.

import React, { useEffect, useMemo, useRef, useState } from "react";
import ReactQuill, { Quill } from "react-quill-with-table";
import QuillBetterTable from "quill-better-table";
import "react-quill-with-table/dist/quill.snow.css";
import "quill-better-table/dist/quill-better-table.css";

Quill.register({ "modules/better-table": QuillBetterTable });

export default function Editor() {
  const reactQuillRef = useRef(null);

  const insertTable = () => {
    const editor = reactQuillRef.current.getEditor();
    const tableModule = editor.getModule("better-table");
    tableModule.insertTable(3, 3);
  };

  useEffect(() => {
    const editor = reactQuillRef.current.getEditor();
    const toolbar = editor.getModule("toolbar");
    toolbar.addHandler("table", () => {
      insertTable();
    });
  }, []);

  const modules = useMemo(
    () => ({
      table: false,
      "better-table": {
        operationMenu: {
          items: {
            unmergeCells: {
              text: "Another unmerge cells name"
            }
          }
        }
      },
      keyboard: {
        bindings: QuillBetterTable.keyboardBindings
      },
      toolbar: [
        [
          "bold",
          "italic",
          "underline",
          "strike",
          { align: [] },
          { script: "sub" },
          { script: "super" },
          { list: "ordered" },
          { list: "bullet" },
          { indent: "-1" },
          { indent: "+1" }
        ], // toggled buttons
        ["table"]
      ]
    }),
    []
  );
  return (
    <div>
      <ReactQuill ref={reactQuillRef} modules={modules} theme="snow" />
    </div>
  );
}

[Huseyin-altun]

@xiehongyang I set up a similar structure and got an error as ' Unexpected token ':''