web-dev-qa-db-fra.com

Comment puis-je initialiser la table dans quill js 2.0.?

Comment puis-je initialiser la table dans quill js 2.0.?

J'ai essayé en utilisant le mot-clé table dans la barre d'outils il montre l'icône de la table mais je n'ai pas pu créer la table.

enter image description here

javascriptquill
8
Agustine Raj

Essayez de fournir un module de table lors de la création de votre éditeur comme ceci:

var editor = new Quill( '#editor', {
    theme: 'snow',
    modules: {
        table: true
    }
} );

Et puis juste référencer le module de table:

const table = editor.getModule('table');

En utilisant une variable de table, vous pouvez déclencher différentes méthodes pour les tables:

table.insertTable(2, 2);

Un exemple complet peut être trouvé ici: https://codepen.io/quill/pen/QxypzX

3
Luchnik

J'aime beaucoup l'extensibilité de Quill. J'implémente un module quill-better-table pour ajouter le support des tables. J'espère que quill-better-table pourrait aider quelqu'un qui a besoin de modifier/rendre le tableau dans quilljs. Exigences: quill.js v2.0.0-dev.3

2
Loway

Il y a une paix de code qui semble très bien fonctionner pour ajouter des tables à 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();
});
0
Cairo Mendes