【亲测免费】 Quill Better Table 项目使用教程

2026-01-18 09:46:57作者：郜逊炳

1. 项目的目录结构及介绍

quill-better-table/
├── demo/
│   ├── index.html
│   └── ...
├── dist/
│   ├── quill-better-table.min.js
│   └── ...
├── src/
│   ├── better-table.js
│   └── ...
├── .eslintrc
├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── webpack.config.js

demo/: 包含项目的演示文件。
dist/: 包含编译后的项目文件。
src/: 包含项目的源代码。
.eslintrc: ESLint 配置文件。
.gitignore: Git 忽略文件配置。
LICENSE: 项目许可证。
README.md: 项目说明文档。
package.json: 项目依赖和脚本配置。
webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要位于 demo/ 目录下，其中 index.html 是主要的演示页面。该文件包含了 Quill 编辑器的初始化和 quill-better-table 插件的加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Quill Better Table Demo</title>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
    <div id="editor"></div>
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script src="../dist/quill-better-table.min.js"></script>
    <script>
        var quill = new Quill('#editor', {
            theme: 'snow',
            modules: {
                toolbar: [
                    [{ header: [1, 2, false] }],
                    ['bold', 'italic', 'underline'],
                    ['image', 'code-block']
                ],
                'better-table': true
            }
        });
    </script>
</body>
</html>

3. 项目的配置文件介绍

`package.json`

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "quill-better-table",
  "version": "1.0.0",
  "description": "A better table module for Quill.",
  "main": "dist/quill-better-table.min.js",
  "scripts": {
    "build": "webpack",
    "demo": "http-server demo"
  },
  "dependencies": {
    "quill": "^1.3.6"
  },
  "devDependencies": {
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/soccerloway/quill-better-table.git"
  },
  "author": "soccerloway",
  "license": "MIT"
}

`webpack.config.js`

webpack.config.js 文件用于配置 Webpack 构建过程。

const path = require('path');

module.exports = {
  entry: './src/better-table.js',
  output: {
    filename: 'quill-better-table.min.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};