編輯器
Editor List Trash
游標位於清單項時，旁側浮出刪除鈕。
安裝
Terminal
pnpm dlx shadcn-vue add @admin/editor-list-trashimport { AdminEditorListTrash } from '@/registry/admin/ui/editor-list-trash'admin-editor-list-trash 依賴 @admin/rich-editor，自帶刪除邏輯（不需 core 的 delete handler）。
用法
把 <AdminEditorListTrash> 放進 <AdminRichEditor> 的 default slot，游標移到清單項時即於右側浮出刪除鈕。
<script setup lang="ts">import type { JSONContent } from '@tiptap/core'import { ref } from 'vue'import { cn } from '@/lib/utils'import { baseProseClass } from '@/components/admin/editor'import { AdminEditorListTrash } from '@/components/admin/editor-list-trash'import { AdminEditorToolbar, defaultEditorItems } from '@/components/admin/editor-toolbar'import { AdminRichEditor, starterKitProseClass } from '@/components/admin/rich-editor'const value = ref<JSONContent | string>( '<ul><li>把游標移到清單項,右側會浮出刪除鈕</li><li>第二項</li><li>第三項</li></ul>')</script><template> <admin-rich-editor v-slot="{ editor, handlers }" v-model="value" :ui="{ base: cn(baseProseClass, starterKitProseClass) }" > <admin-editor-toolbar :editor :handlers="handlers" :items="defaultEditorItems" /> <admin-editor-list-trash :editor /> </admin-rich-editor></template><script setup lang="ts">import { ref } from 'vue'import { AdminEditorListTrash } from '@/registry/admin/ui/editor-list-trash'import { AdminEditorToolbar, defaultEditorItems } from '@/registry/admin/ui/editor-toolbar'import { AdminRichEditor } from '@/registry/admin/ui/rich-editor'const value = ref('<ul><li>清單項</li></ul>')</script><template> <admin-rich-editor v-slot="{ editor }" v-model="value"> <admin-editor-toolbar :editor :items="defaultEditorItems" /> <admin-editor-list-trash :editor /> </admin-rich-editor></template>API 參考
admin-editor-list-trash
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
editor* | Editor | — | — |
class | ClassValue | — | — |
* 代表必填
注意事項
- 僅作用於清單項：只在游標位於
listItem/taskItem時顯示；一般段落不出現。 - 刪除整個節點：點擊會刪掉整個清單項（含內容），非僅清空文字。
- 不支援 SSR：旁側刪除鈕依賴瀏覽器 DOM 定位；元件殼不含
<ClientOnly>。Nuxt 請自行以<ClientOnly>包覆，其他 SSR 框架用等價機制；純 CSR 不需處理。見 安裝 · SSR。
更新紀錄
- feat: 新增 tiptap editor 元件系列273a0d0