GreatRTE/ TinyMCE 核对列表插件( 永远免费)

一个用于大RTE/TinyMCE的轻量级核对表插件,用于添加交互式复选框功能.

见Demo

安装

npm install @etoundi1er/hugerte-checklist-plugin

使用量

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 - 复选箱 <li> 元素
• text - 复选框项目的文本内容
• checked - 布尔表示是否检查了项目

// 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)

将所有核对表项目都按其状态处理.

// 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: <li>, text: 'Buy groceries', checked: true },
//   { element: <li>, text: 'Cook dinner', checked: false },
//   { element: <li>, 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

许可证

麻省理工学院