web-dev-qa-db-ja.com

クイルjs 2.0でテーブルを初期化するにはどうすればよいですか？

クイルjs 2.0でテーブルを初期化するにはどうすればよいですか？

ツールバーでテーブルキーワードを使用して試しましたが、テーブルアイコンが表示されますが、テーブルを作成できませんでした。

enter image description here

javascriptquill
8
Agustine Raj

次のようにエディターを作成するときは、テーブルモジュールを提供してください。

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

そして、テーブルモジュールを参照するだけです：

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

テーブル変数を使用すると、テーブルに対してさまざまなメソッドをトリガーできます。

table.insertTable(2, 2);

完全な例はここにあります： https://codepen.io/quill/pen/QxypzX

3
Luchnik

Quillの拡張性はとても気に入っています。テーブルのサポートを追加するために、モジュール quill-better-table を実装しています。 quill-better-tableがquilljsでテーブルを編集/レンダリングする必要がある人に役立つことを願っています。要件：quill.js v2.0.0-dev.3

2
Loway

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