Giter Club home page Giter Club logo

Comments (6)

xiehongyang avatar xiehongyang commented on July 29, 2024 2

@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!

from quill-better-table.

xiehongyang avatar xiehongyang commented on July 29, 2024

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);
  }
}

from quill-better-table.

soccerloway avatar soccerloway commented on July 29, 2024

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:
image
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.

from quill-better-table.

Fredxingxing avatar Fredxingxing commented on July 29, 2024

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

from quill-better-table.

akshaya-a-p avatar akshaya-a-p commented on July 29, 2024

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>
  );
}

from quill-better-table.

Huseyin-altun avatar Huseyin-altun commented on July 29, 2024

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

from quill-better-table.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.