Comments (6)
@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.
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.
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.
from quill-better-table.
i use react and react-quill meet the same question, thx a lot.
from quill-better-table.
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.
@xiehongyang I set up a similar structure and got an error as ' Unexpected token ':''
from quill-better-table.
Related Issues (20)
- Cannot center table with align tool.
- Hope to upgrade to Quill version 2.0.0 HOT 3
- display bug
- Is there any way to display operationMenu buttons in quill's toolbar instead of the right click pop up ?
- cannot add a ordered/unordered list to a table cell HOT 2
- Uncaught TypeError: Cannot read properties of undefined (reading 'next') HOT 1
- 如何修改单元格的width HOT 1
- Unexpected token ':' in Angular Project HOT 2
- How can I put the "merged function" into the toolbar?
- lower performance when paste a large doc which include many tables
- 怎样将table的Delta转换成html
- Modify column to specified width
- <p>` tags are adding instead of table. HOT 3
- TypeError: Cannot read properties of null (reading 'descendants')
- Cannot read properties of undefined (reading 'pop') HOT 5
- Are there plans to fix bugs, add features for this module?
- Error: [Parchment] Unable to create table blot
- Not working on quill v2.0.0-beta.0
- 作者大佬还更新吗?table 插件用不了,是不是紧跟一下 quill 的更新啊
- Operation-Menu goes outside screen size when Quill is near bottom: HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from quill-better-table.