admin/registry
編輯器

Editor TaskList

參考
可勾選待辦清單。

安裝

Terminal
pnpm dlx shadcn-vue add @admin/editor-task-listpnpm add @tiptap/extension-task-list @tiptap/extension-task-item
import { TaskItem } from '@tiptap/extension-task-item'import { TaskList } from '@tiptap/extension-task-list'import { createTaskListHandler } from '@/registry/admin/ui/editor-task-list'

含 createTaskListHandler；待辦清單能力來自 tiptap TaskList／TaskItem，需自行注入。把 TaskList 與 TaskItem.configure({ nested: true }) 傳入 :extensions、createTaskListHandler 經 :handlers 注入後，toolbar 可放 { kind: 'taskList' } 按鈕（見下方用法）。

用法

<script setup lang="ts">import type { JSONContent } from '@tiptap/core'import type { EditorToolbarItem } from '@/components/admin/editor-toolbar'import { IconListCheck } from '@tabler/icons-vue'import { TaskItem } from '@tiptap/extension-task-item'import { TaskList } from '@tiptap/extension-task-list'import { ref } from 'vue'import { cn } from '@/lib/utils'import { baseProseClass } from '@/components/admin/editor'import { createTaskListHandler, editorTaskListClass } from '@/components/admin/editor-task-list'import { AdminEditorToolbar, defaultEditorItems } from '@/components/admin/editor-toolbar'import { AdminRichEditor, starterKitProseClass } from '@/components/admin/rich-editor'​const value = ref<JSONContent | string>(  '<ul data-type="taskList"><li data-type="taskItem" data-checked="true">已完成的項目</li><li data-type="taskItem" data-checked="false">待辦項目</li></ul><p>選取段落後點 toolbar 的待辦清單鈕切換。</p>')​// opt-in：注入官方 TaskList / TaskItem extension 與 taskList handlerconst extensions = [TaskList, TaskItem.configure({ nested: true })]const handlers = { taskList: createTaskListHandler() }​const items: EditorToolbarItem[][] = [  ...defaultEditorItems,  [{ kind: 'taskList', icon: IconListCheck, label: '待辦清單', tooltip: { text: '待辦清單' } }]]</script>​<template>  <admin-rich-editor    v-slot="{ editor, handlers: mergedHandlers }"    v-model="value"    :extensions="extensions"    :handlers="handlers"    :ui="{ base: cn(baseProseClass, starterKitProseClass, editorTaskListClass) }"  >    <admin-editor-toolbar :editor :handlers="mergedHandlers" :items="items" />  </admin-rich-editor></template>
<script setup lang="ts">import type { EditorToolbarItem } from '@/registry/admin/ui/editor-toolbar'import { IconListCheck } from '@tabler/icons-vue'import { TaskItem } from '@tiptap/extension-task-item'import { TaskList } from '@tiptap/extension-task-list'import { ref } from 'vue'import { createTaskListHandler } from '@/registry/admin/ui/editor-task-list'import { AdminEditorToolbar, defaultEditorItems } from '@/registry/admin/ui/editor-toolbar'import { AdminRichEditor } from '@/registry/admin/ui/rich-editor'​const value = ref('<ul data-type="taskList"><li data-type="taskItem" data-checked="true">已完成</li><li data-type="taskItem" data-checked="false">待辦</li></ul>')​const extensions = [TaskList, TaskItem.configure({ nested: true })]const handlers = { taskList: createTaskListHandler() }const items: EditorToolbarItem[][] = [  ...defaultEditorItems,  [{ kind: 'taskList', icon: IconListCheck, label: '待辦清單', tooltip: { text: '待辦清單' } }]]</script>​<template>  <admin-rich-editor v-model="value" :extensions="extensions" :handlers="handlers">    <admin-editor-toolbar :items="items" />  </admin-rich-editor></template>

啟用後：

  • toggleTaskList command 可用，toolbar 按鈕在其他 list type 上會自動互轉
  • indent / outdent 對 task item 的縮排由 core 提供（pickIndentTarget 涵蓋 taskItem）
  • 待辦清單的勾選框與排版樣式不內含於 registry，由使用者依需求自套（見 demo 的 taskListContentClass）

API 參考

@tiptap/extension-task-list / @tiptap/extension-task-item 套件 API 詳見 tiptap task-list 官方文件。

注意事項

  • extension 必須在建立編輯器時注入：TaskList / TaskItem 無法於編輯器建立後補上，未注入時待辦清單內容會被 parser 丟掉。

Editor Placeholder

內容為空時顯示提示文字。

Editor Indent

toolbar 縮排按鈕；段落、標題、清單層級。