项目简介link

Quillto 是一套基于 Tailwind CSS 的 HTML 模板，专门用于快速集成 Quill 富文本编辑器。模板内置了 Snow 编辑器主题，并提供了完整的页面布局框架，适合需要富文本编辑功能的后台管理或内容创作场景。

技术栈link

• Tailwind CSS 3.4.4
• Quill 2.0.2（富文本编辑器）
• Gulp 4.0.2（构建工具）
• Yarn（包管理器）
• Node.js
• jQuery、Preline UI、SimpleBar

项目结构link

Quillto_v1.0/
├── Documentation/
│   ├── index.html
│   ├── favicon.ico
│   └── logo-sm.png
└── HTML/
    ├── gulpfile.js
    ├── package.json
    ├── tailwind.config.js
    └── src/
        ├── index.html
        ├── quill-bubble.html
        └── starter.html

核心文件说明link

• gulpfile.js — Gulp 构建配置，定义资产编译与本地服务器任务
• package.json — 项目依赖声明，涵盖 Quill、Tailwind 及所有插件
• tailwind.config.js — Tailwind CSS 主题与插件扩展配置
• src/index.html — Snow 主题编辑器演示页面入口
• src/starter.html — 空白的起始页面模板
• Documentation/index.html — 官方文档与快速开始指南

快速开始link

# 安装 Node.js（需 v16 以上）

# 全局安装 Gulp
npm install gulp -g

# 进入 HTML 目录并安装依赖
cd Quillto_v1.0/HTML
yarn install

# 启动开发服务器
gulp

gulp 命令会自动编译资源、启动 BrowserSync 本地服务并监听文件变动。gulp build 仅执行构建输出到 dist 目录。

使用建议link

开发富文本编辑功能时，Quill 的 CSS 文件（quill.core.css、quill.snow.css）已在 index.html 中引入，若需切换到 Bubble 主题可参考 quill-bubble.html。模板使用 @@include 语法组织页面片段，正式部署前需确保 Gulp 构建流程已正常执行。