# @etoundi1er/hugerte-checklist-plugin 中文文档
规范地址：https://npmcn.com/package/%40etoundi1er/hugerte-checklist-plugin/
版本：1\.0\.1
npm 元数据更新时间：2026-01-30T00:08:49.214Z
中文译文更新时间：2026-11-14T00:03:47.730Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40etoundi1er/hugerte-checklist-plugin
原文对照：https://npmcn.com/package/%40etoundi1er/hugerte-checklist-plugin/?lang=original
项目主页：https://github.com/etoundi1er/hugerte-checklist-plugin#readme
源码仓库：https://github.com/etoundi1er/hugerte-checklist-plugin
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：40.9 kB，5 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2026-01-14T23:16:01.297Z
- 最新版本发布：2026-01-30T00:08:49.076Z
- 近 30 天下载量：5497（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 2 个）
## 中文简介
GreatRTE 添加清单功能的插件
## 安装
```sh
npm install @etoundi1er/hugerte-checklist-plugin
```
也可以使用：`pnpm add @etoundi1er/hugerte-checklist-plugin`、`yarn add @etoundi1er/hugerte-checklist-plugin`、`bun add @etoundi1er/hugerte-checklist-plugin`
## README
# GreatRTE/ TinyMCE 核对列表插件( 永远免费)
一个用于大RTE/TinyMCE的轻量级核对表插件,用于添加交互式复选框功能.
[见Demo](https://etoundi1er.github.io/hugerte-checklist-plugin/demo.html)
## 安装
```bash
npm install @etoundi1er/hugerte-checklist-plugin
```
## 使用量
```javascript
import { onChecklistStateChange, getChecklistItems } from '@etoundi1er/hugerte-checklist-plugin';
hugerte.init({
selector: '#editor',
plugins: 'lists checklist',
toolbar: 'checklist bullist numlist',
setup: (editor) => {
// Listen to checklist state changes (scoped to this editor)
onChecklistStateChange(editor, (event) => {
console.log('Editor:', event.editor.id);
console.log('Item toggled:', event.text, event.checked);
});
}
});
```
## 键盘快捷键
- `Enter` - 创建新的清单项目
- `Ctrl+Enter` 编号 : `Cmd+Enter` - 切换复选框
- `Backspace` 空项 - 退出清单
## API 密码
### `onChecklistStateChange(editor, callback)`
为复选框状态更改注册回调, 范围为特定编辑器实例 。 这将确保当您在一个页面上拥有多个编辑器时,只为编辑器触发回调.
**参数:**
- `editor` - 大型RTE/TinyMCE编辑器实例
- `callback` - 当复选框状态改变时调用函数
**事件对象属性 :**
- `editor` - 发生变更的编辑实例
- `element` - 复选箱 `` 元素
- `text` - 复选框项目的文本内容
- `checked` - 布尔表示是否检查了项目
```javascript
// Inside setup (most common pattern)
import { onChecklistStateChange } from '@etoundi1er/hugerte-checklist-plugin'
hugerte.init({
selector: '#my-editor',
plugins: 'lists checklist',
toolbar: 'checklist bullist numlist',
setup: (editor) => {
const unsubscribe = onChecklistStateChange(editor, (event) => {
console.log('Editor:', event.editor.id)
console.log('Item:', event.text)
console.log('Checked:', event.checked)
console.log('Element:', event.element)
})
// Later, to stop listening (e.g., on editor remove):
editor.on('remove', () => unsubscribe())
}
})
// Save checklist state to a backend when items change
hugerte.init({
selector: '#my-editor',
plugins: 'lists checklist',
setup: (editor) => {
onChecklistStateChange(editor, (event) => {
fetch('/api/checklist-items', {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
id: event.element.id,
text: event.text,
completed: event.checked
})
})
})
}
})
// Update UI when checklist items change (scoped to editor)
hugerte.init({
selector: '#my-editor',
plugins: 'lists checklist',
setup: (editor) => {
onChecklistStateChange(editor, (event) => {
const body = event.editor.getBody()
const completedCount = body.querySelectorAll('[data-checked="true"]').length
const totalCount = body.querySelectorAll('.tox-checklist-item').length
document.getElementById('progress').textContent = `${completedCount}/${totalCount}`
})
}
})
```
### `getChecklistItems(element)`
将所有核对表项目都按其状态处理.
```javascript
// Get all checklist items from the editor
import { getChecklistItems } from '@etoundi1er/hugerte-checklist-plugin'
const editor = tinymce.get('my-editor')
const items = getChecklistItems(editor.getBody())
console.log(items)
// Output:
// [
// { element: , text: 'Buy groceries', checked: true },
// { element: , text: 'Cook dinner', checked: false },
// { element: , text: 'Clean up', checked: false }
// ]
// Filter only completed items
const editor = tinymce.get('my-editor')
const allItems = getChecklistItems(editor.getBody())
const completedItems = allItems.filter(item => item.checked)
console.log(`${completedItems.length} items completed`)
// Export checklist data
const editor = tinymce.get('my-editor')
const items = getChecklistItems(editor.getBody())
const checklistData = items.map(item => ({
text: item.text,
completed: item.checked
}))
// Save to backend
fetch('/api/checklists/save', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(checklistData)
})
// Get statistics about the checklist
const editor = tinymce.get('my-editor')
const items = getChecklistItems(editor.getBody())
const total = items.length
const completed = items.filter(item => item.checked).length
const pending = total - completed
const percentage = Math.round((completed / total) * 100)
console.log(`Progress: ${percentage}% (${completed}/${total})`)
```
## 本地服务器
`python3 -m http.server 8000`
## 许可证
麻省理工学院
## 常见问题
### @etoundi1er/hugerte-checklist-plugin 是什么？
GreatRTE 添加清单功能的插件
### 如何安装 @etoundi1er/hugerte-checklist-plugin？
在项目目录运行 npm install @etoundi1er/hugerte-checklist-plugin，或使用 pnpm add / yarn add / bun add。
### @etoundi1er/hugerte-checklist-plugin 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/etoundi1er\_\_hugerte-checklist-plugin 是否存在。
### @etoundi1er/hugerte-checklist-plugin 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @etoundi1er/hugerte-checklist-plugin 可以商用吗？
@etoundi1er/hugerte-checklist-plugin 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @etoundi1er/hugerte-checklist-plugin 的下载量有多少？
根据 npm 官方下载统计，@etoundi1er/hugerte-checklist-plugin 在 2026/10/14 – 2026/11/12 这 30 天内被下载 5,497 次，日均约 183 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @etoundi1er/hugerte-checklist-plugin 还在维护吗？
最新版本 1\.0\.1 发布于 2026/01/30（9 个月前）；至今共发布 2 个版本，其中过去 12 个月发布了 2 个；首次发布于 2026/01/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。