Skip to content
Module for better table in Quill, more useful features are supported.
JavaScript CSS
Branch: master
Clone or download

Latest commit

luowei luowei
luowei and luowei [build]pro
Latest commit aaf6eab Dec 5, 2019

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo [feature]add background color to selected table cells Sep 17, 2019
dist [build]pro Dec 5, 2019
src fix(src/quill-better-table.js): add handler for ArrowUp Dec 5, 2019
.gitignore [modify].gitignore Apr 18, 2019
LICENSE Initial commit Mar 26, 2019
README.md [build]pro Dec 5, 2019
package.json [build]pro Dec 5, 2019
webpack.config.js

README.md

quill-better-table

A module for better table in Quill, more useful features are supported. There is a list of features below. Thanks quilljs for its awesome extensibility. Hope that quill-better-table could help you.

Online Demo

quill-better-table Codepen Demo

Updated

  • Add operation menus icons.

  • Add 2 dots to make selected areas easier to recognize.

  • Add support for background color in table cells and relatived configures.(Mentioned in issue 8)

Features

Clicking on tables in quill editor will initialize the tools for table, all features are based on it.

  • Multiple lines in table cell

    Press Enter to add new lines in the table cell now.

  • Add table column left/right

    Right-click on table to open context menu, you can see the button.

  • Add table row top/bottom

    Right-click on table to open context menu, you can see the button.

  • Remove selected table columns

    Right-click on table to open context menu, you can see the button.

  • Remove selected table rows

    Right-click on table to open context menu, you can see the button.

  • Selects multiple table cells

    Dragging over the table cells could select the tableCells surrounded by the highlight borders.

  • Merge/Unmerge table cells

    Right-click on table to open context menu, you can see the button.

  • Resize the width of column

    Dragging lines between the top tool for columns could resize width of columns.

  • Delete table

    Right-click on table to open context menu, you can see the button.

Requirements

quilljs 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:

  • insertColumnRight
  • insertColumnLeft
  • insertRowUp
  • insertRowDown
  • mergeCells
  • unmergeCells
  • deleteColumn
  • deleteRow
  • deleteTable

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(lw54760187@hotmail.com) or Contribute on Issues, I glad to hear your suggestion.

License

MIT License

You can’t perform that action at this time.