background

We came to QuillJS because the company’s previous rich text editor was no longer suitable for more content production scenarios, so we planned to develop a more customized editor. After some research, I was attracted by the strong scalability of QuillJS and the unique design of Parchment and Delta, so I chose QuillJS (of course, the star of 2W+ is also an important reason). But “table editing” has been plaguing this excellent rich text editor, as can be seen in Quill’s Issue no. 117: Add Support for Table.

According to quill’s authors, QuillJS 2.0 will support table editing, but with limited features such as no line breaks, no merging/splitting of cells in tables, etc. So I decided to try to supplement this missing feature for QuillJS.

quill-better-table

Table module based on QuillJS v2.0.0-dev.x, supports a variety of common functions, aimed at improving the quill editor in table editing. Git repository: github.com/soccerloway… Online Demo: Codepen Demo

features

  • Supports line breaks in table cells (Enter key);
  • Drag and drop multiple cells (table area) with blue box highlighting;
  • Use the right-click menu to add new columns to the left and right of the selected table area;
  • Use the right-click menu to add a new row above and below the selected table area.
  • Delete rows/columns in the drag area;
  • Batch merge/split cells;
  • Drag the column control tool at the top of the table to change the width of the corresponding table column.

Use the information

Quill-better-table is implemented based on QuillJS version 2.0, quillJS version 2.0 is not currently released in a stable version, so use it with caution. Since I’m using webpack externals to package externally imported dependencies, be sure to expose the Quill object to the Window object or introduce QuillJS via script tags so that Quill-better-table gets the dependencies.

The installation

npm install quill-better-table
Copy the code

usage

  1. Load external dependencies:
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.3/quill.min.js" type="text/javascript"></script>
Copy the code
<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.3/quill.snow.min.css" rel="stylesheet">
<link href="unpkg.com/[email protected]/dist/quill-better-table.css" rel="stylesheet">
Copy the code
  1. ES6 specific usage:
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)
    }
}
Copy the code

Module API

First, we can use quill.getModule(module_name) to get the quill-better-table:

let tableModule = quill.getModule('better-table')
Copy the code

tableModule.getTable(range = quill.getSelection())

Returns an array containing the current TableContainer, TableRow, TableCell, and offset.

module.getTable()  // current selection
module.getTable(range)
// [TableContainer, TableRow, TableCell, 0]
Copy the code

tableModule.insertTable(rows: Number, columns: Number)

Inserts a new table at the cursor position

tableModule.insertTable(3, 3)
Copy the code

Module configuration item

Currently, quill-better-Table only provides the option configuration for operationMenu:

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    table: false, / /disable table module
    'better-table': {
      operationMenu: {
        items: {
          unmergeCells: {
            text: 'Another unmerge cells name'
          }
        }
      }
    },
    keyboard: {
      bindings: QuillBetterTable.keyboardBindings
    }
  }
})
Copy the code

operationMenu.items

By default, the right-click operation menu opens all operation functions. If you set an item in items to false, the operation will be disabled and the corresponding button will not appear in the right-click menu.

items: {
  {
    operationKey: {
      text: 'foo'
    },
    
    operationKey: false}}Copy the code

OperationKey represents the name of the feature, and the following list lists all the feature names for configuration:

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

Operationkey. text Indicates the text of the button whose function is in the right-click menu. You can configure the text as required.

The last

If quill-better-table can help you, I hope you can give me your valuable suggestions through reply, email or Git issues. I will continue to work hard to improve it. A follow-up article is planned to specifically explain the core principles of Quill-better-table.

Oh, and don’t forget the star in the upper right corner of Github