# quill-better-table A module for better table in Quill, more useful features are supported. There is a list of features below. Thanks [quilljs](https://quilljs.com/) for its awesome extensibility. Hope that quill-better-table could help you. # Online Demo [quill-better-table Codepen Demo](https://codepen.io/soccerloway/pen/WWJowj) # Updated <ul> <li> <p>Add operation menus icons.</p> </li> <li> <p>Add 2 dots to make selected areas easier to recognize.</p> </li> <li> <p>Add support for background color in table cells and relatived configures.(Mentioned in <a href="https://github.com/soccerloway/quill-better-table/issues/8">issue 8)</a></p> </li> </ul> # Features Clicking on tables in quill editor will initialize the tools for table, all features are based on it. <ul> <li> <h3>Multiple lines in table cell</h3> <p>Press Enter to add new lines in the table cell now.</p> </li> <li> <h3>Add table column left/right</h3> <p>Right-click on table to open context menu, you can see the button.</p> </li> <li> <h3>Add table row top/bottom</h3> <p>Right-click on table to open context menu, you can see the button.</p> </li> <li> <h3>Remove selected table columns</h3> <p>Right-click on table to open context menu, you can see the button.</p> </li> <li> <h3>Remove selected table rows</h3> <p>Right-click on table to open context menu, you can see the button.</p> </li> <li> <h3>Selects multiple table cells</h3> <p>Dragging over the table cells could select the tableCells surrounded by the highlight borders.</p> </li> <li> <h3>Merge/Unmerge table cells</h3> <p>Right-click on table to open context menu, you can see the button.</p> </li> <li> <h3>Resize the width of column</h3> <p>Dragging lines between the top tool for columns could resize width of columns.</p> </li> <li> <h3>Delete table</h3> <p>Right-click on table to open context menu, you can see the button.</p> </li> </ul> # Requirements [quilljs](https://github.com/quilljs/quill) v2.0.0-dev.3 Since I use webpack externals to bundle, you must expose `Quill` to window object, like load quill.js by script tag globally. Or you may need to fork this repo and build what you need. # Installation ``` npm install quill-better-table ``` # Usage Load quill and style dependencies ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.3/quill.min.js" type="text/javascript"></script> ``` ``` <link href="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.3/quill.snow.min.css" rel="stylesheet"> <link href="https://unpkg.com/quill-better-table@1.2.8/dist/quill-better-table.css" rel="stylesheet"> ``` ES6 ``` import QuillBetterTable from 'quill-better-table' Quill.register({ 'modules/better-table': QuillBetterTable }, true) window.onload = () => { const quill = new Quill('#editor-wrapper', { theme: 'snow', modules: { table: false, // disable table module 'better-table': { operationMenu: { items: { unmergeCells: { text: 'Another unmerge cells name' } } } }, keyboard: { bindings: QuillBetterTable.keyboardBindings } } }) document.body.querySelector('#insert-table') .onclick = () => { let tableModule = quill.getModule('better-table') tableModule.insertTable(3, 3) } } ``` # Module methods first, you can get quill-better-table module by `quill.getModule` ``` let module = quill.getModule('better-table') ``` ## module.getTable(range = quill.getSelection()) get an array with TableContainer, TableRow, TableCell, offset through the given range. ``` module.getTable() // current selection module.getTable(range) // [TableContainer, TableRow, TableCell, 0] ``` ## module.insertTable(rows: Number, columns: Number) insert table at current position ``` module.insertTable(3, 3) ``` # Module Options quill-better-table only provide operation options now. ``` const quill = new Quill('#editor', { theme: 'snow', modules: { table: false, // disable table module 'better-table': { operationMenu: { items: { unmergeCells: { text: 'Another unmerge cells name' } }, color: { colors: ['#fff', 'red', 'rgb(0, 0, 0)'], // colors in operationMenu text: 'Background Colors' // subtitle } } }, keyboard: { bindings: QuillBetterTable.keyboardBindings } } }) ``` ## operationMenu OperationMenu configures the operation list in right-click menu. ## operationMenu.items operationMenu show all operations as default. `false` will remove the operation. ``` { operationKey: { text: 'foo' }, operationKey: false } ``` `operationKey` is the name of operation, there is a list below: <ul> <li>insertColumnRight</li> <li>insertColumnLeft</li> <li>insertRowUp</li> <li>insertRowDown</li> <li>mergeCells</li> <li>unmergeCells</li> <li>deleteColumn</li> <li>deleteRow</li> <li>deleteTable</li> </ul> You may need to modify the menu text, `operationKey.text` will do that. ## operationMenu.color Background colors is optional, the default is hidden. If you need this feature, use this configure. ``` { colors: ['#fff', 'red', 'rgb(0, 0, 0)'], // colors you need in operationMenu, ['white', 'red', 'yellow', 'blue'] as default text: 'Background Colors' // subtitle, 'Background Colors' as default } ``` # Community Send me an email(<a href="mailto: lw54760187@hotmail.com">lw54760187@hotmail.com</a>) or Contribute on [Issues](https://github.com/soccerloway/quill-better-table/issues), I glad to hear your suggestion. # License [MIT License](https://rmm5t.mit-license.org/)