quill-better-table-plus

中文 | English

Note: This is an enhanced (Plus) version of the quill-better-table npm package. The original package has not been maintained for a long time, and this enhanced version will be maintained and updated by me.

Summary

quill-better-table-plus is an enhanced version of the Quill rich text editor plugin that provides more powerful and flexible table editing features.It enables users to easily create, edit and format tables, as well as perform more complex table operations.

This package is an enhancement based on the latest available version of the original quill-better-table package, adding a number of new features and fixing a number of known issues to ensure that it is suitable for current environments and needs.

requirement

quilljs v2.0.0-dev.3

Online Demo

quill-better-table-plus Codepen Demo

Install

You can install @hbasanjideh/quill-better-table-plus via npm:

npm install @hbasanjideh/quill-better-table-plus

Module Format Support

This package supports multiple module formats for maximum compatibility:

• ESM (ECMAScript Modules): import QuillBetterTablePlus from '@hbasanjideh/quill-better-table-plus'
• CommonJS: const QuillBetterTablePlus = require('@hbasanjideh/quill-better-table-plus')
• UMD: Can be used directly in browsers via <script> tags

ESM Support (v0.1.7+)

Starting from version 0.1.7, this package provides proper ESM support that resolves the "Module is not ESM" warning in modern bundlers like Vite, Webpack 5, and others.

// Modern ESM import (recommended)
import QuillBetterTablePlus from '@hbasanjideh/quill-better-table-plus';

// Named import also available
import { QuillBetterTablePlus } from '@hbasanjideh/quill-better-table-plus';

Node.js Compatibility

• Node.js: 14.0.0 or higher
• Previous versions: If you need to use with Node.js 12.x, please use version 0.1.5 or earlier

Use

Import 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-plus@0.1.3/dist/quill-better-table-plus.css" rel="stylesheet">

ES6

import QuillBetterTablePlus from '@hbasanjideh/quill-better-table-plus'

Quill.register({
  'modules/better-table-plus': QuillBetterTablePlus
}, true)

window.onload = () => {
  const quill = new Quill('#editor-wrapper', {
    theme: 'snow',
    modules: {
      table: false,  // disable table module
      'better-table-plus': {
        operationMenu: {
          items: {
            unmergeCells: {
              text: 'Another unmerge cells name'
            }
          }
        }
      },
      keyboard: {
        bindings: QuillBetterTablePlus.keyboardBindings
      }
    }
  })

  document.body.querySelector('#insert-table')
    .onclick = () => {
    let tableModule = quill.getModule('better-table-plus')
    tableModule.insertTable(3, 3)
  }
}

Future Functions

We plan to further enhance quill-better-table-plus by adding the following features in a future release:

• Adapts to multiple table formats: Supports a wide range of directly copied and pasted table data with styles and better parsing and rendering.
• Expose more api: Provide more api for developers to use in order to quickly apply different features, looks and styles.
• Typescript support

We are working hard on these features and will gradually roll them out in future releases. Stay tuned!

If you have any other feature suggestions or ideas, feel free to raise them in the issue, we'd love to hear your feedback and contributions.

Community

Feel free to contribute code and submit issues. If you find any bugs, or have suggestions for improvements, please create an issue or submit a pull request.

Developer note: Node.js version: 14.x or higher recommended for development. The package supports Node.js 14.0.0+.

License

MIT License