Closed xiehongyang closed 4 years ago
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);
}
}
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.
@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!
i use react and react-quill meet the same question, thx a lot.
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>
);
}
@xiehongyang I set up a similar structure and got an error as ' Unexpected token ':''
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",