Unfortunately, you cannot use quill-better-table with ngx-quill wrapper. ngx-quill is still based on quilljs v1. quill-better-table requires quilljs v2.0.0-dev.3. You can read about that in the Requirements section: here
I can share with you how I implemented simple paste and read table in my case. Its inspired by this article and created with custom block. And its not a correct way to add elements to quill. But we are using editor internally so we are sure that it is in safe hands.
- Create a new 'Block Embed' like this:
import Quill from 'quill';
const BlockEmbed = Quill.import('blots/block/embed');
export class TableBlockEmbed extends BlockEmbed {
static blotName = 'TableBlockEmbed';
static tagName = 'table';
static create(value) {
const node = super.create();
let valueToReturn = value;
if (!value.includes('assignedTableId')) {
const tableId = `assignedTableId-${Date.now()}`;
valueToReturn = value
.replace('#tableId', `#${tableId}`)
.replace('table-layout: fixed;', '');
node.setAttribute('id', tableId);
} else {
const existedId = valueToReturn.match(/#assignedTableId-(\d+)/i)[1];
node.setAttribute('id', `assignedTableId-${existedId}`);
}
node.innerHTML = this.transformValue(valueToReturn);
return node;
}
static transformValue(value) {
let handleArr = value.split('\n');
handleArr = handleArr.map(e => e.replace(/^[\s]+/, '')
.replace(/[\s]+$/, ''));
return handleArr.join('');
}
static value(node) {
return node.innerHTML;
}
}
- Run registration of new embed block in the constructor of your component which uses ngx-quill:
constructor() {
Quill.register(TableBlockEmbed, true);
}
- add on editor Created this code below. (you can of course add/remove styles here you need. I added for example margin: 0 auto !important; because I want to force table to be always centered):
onEditorCreated(quill: Quill): void {
quill.clipboard.addMatcher('TABLE', (node, delta) => {
const Delta = Quill.import('delta');
const tableTagStyles = node.getAttribute('style');
return new Delta([
{
insert: {
TableBlockEmbed:
`<style>#tableId {${tableTagStyles} margin: 0 auto !important; }</style>` + delta.ops[0].insert.TableBlockEmbed
}
}
]);
});
}
- I added also some styles:
quill-view,
quill-editor{
::ng-deep {
table {
width: 100%; // if table has no width - then give it by default 100%
max-width: 100% !important;
box-sizing: border-box;
}
}
}
I know this solution is just workaround but until waiting for ngx-quill based on quill 2, I was able at least to give the feature of pasting tables inside the editor which looks quite nice.
Example:
table in office word:

table in ngx-quill:

table in excel:

table in ngx-quill:

Error when trying to implement quill-better-table with quill editor component in Angular - Stack Overflow
Does quill editor supports table??
Quill table
What Quill version to use?
» npm install ngx-quill
» npm install quill-table-better
Hi has anyone used quill in angular 6 and implemented table in the editor. I've used quill 2.0.0 in angular 6 the table works fine but it didn't patch data like text. In the body. Is there any solution for it has anyone done it or any kind of insights on this topic would we great.
Thank you!
» npm install quill-better-table
» npm install ngx-quill-v2