How can I initialize table in quill js 2.0.?
I've tried by using table keyword in toolbar it shows table icon but I could not create the table.
How can I initialize table in quill js 2.0.?
I've tried by using table keyword in toolbar it shows table icon but I could not create the table.
Try to provide table module when creating your editor like this:
var editor = new Quill( '#editor', {
theme: 'snow',
modules: {
table: true
}
} );
And then just reference table module:
const table = editor.getModule('table');
Using table variable you can trigger different methods for tables:
table.insertTable(2, 2);
Full example can be found here: https://codepen.io/quill/pen/QxypzX
I really like the extensibility of Quill a lot. I implement a module quill-better-table to add support for tables. Hope that quill-better-table could help someone who need to edit/render table in quilljs. Requirements: quill.js v2.0.0-dev.3
There is a peace of code that seems to work very well to add tables to QuillJs:
https://codepen.io/quill/pen/QxypzX
var bubble = new Quill('#bubble-container', {
theme: 'bubble',
modules: {
table: true,
}
});
var snow = new Quill('#snow-container', {
theme: 'snow',
modules: {
table: true,
}
});
var output = new Quill('#output-container', {
theme: 'bubble',
modules: { table: true },
readOnly: true,
})
bubble.on('text-change', function(delta, old, source) {
if (source === 'user') {
snow.updateContents(delta, 'api');
updateOutput();
}
});
const table = snow.getModule('table');
snow.on('text-change', function(delta, old, source) {
if (source === 'user') {
bubble.updateContents(delta, 'api');
updateOutput();
}
});
function updateOutput() {
const bubbleContent = bubble.getContents();
const snowContent = snow.getContents();
// TODO compare
output.setContents(bubbleContent);
const outputContent = output.getContents();
// TODO compare outputContent
}
document.querySelector('#insert-table').addEventListener('click', function() {
table.insertTable(3, 3);
});
document.querySelector('#insert-row-above').addEventListener('click', function() {
table.insertRowAbove();
});
document.querySelector('#insert-row-below').addEventListener('click', function() {
table.insertRowBelow();
});
document.querySelector('#insert-column-left').addEventListener('click', function() {
table.insertColumnLeft();
});
document.querySelector('#insert-column-right').addEventListener('click', function() {
table.insertColumnRight();
});
document.querySelector('#delete-row').addEventListener('click', function() {
table.deleteRow();
});
document.querySelector('#delete-column').addEventListener('click', function() {
table.deleteColumn();
});
document.querySelector('#delete-table').addEventListener('click', function() {
table.deleteTable();
});