編輯器
Editor Drag Handle
游標停在區塊時左側浮出把手；拖曳排序或選取區塊。
安裝
Terminal
pnpm dlx shadcn-vue add @admin/editor-drag-handleimport { AdminEditorDragHandle } from '@/registry/admin/ui/editor-drag-handle'admin-editor-drag-handle 依賴 @admin/rich-editor 與 @tiptap/extension-drag-handle-vue-3。@admin/rich-editor 本身不會渲染任何 drag handle，需安裝本包並放進 default slot。
用法
把 <AdminEditorDragHandle> 放進 <AdminRichEditor> 的 default slot，游標 hover 區塊時於左側浮出 grip。
<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 { AdminEditorDragHandle } from '@/components/admin/editor-drag-handle'import { AdminEditorToolbar, defaultEditorItems } from '@/components/admin/editor-toolbar'import { AdminRichEditor, starterKitProseClass } from '@/components/admin/rich-editor'const value = ref<JSONContent | string>( '<h2>Drag Handle 範例</h2><p>滑鼠 hover 任一段落,左側會出現拖曳區塊。</p><p>第二個段落。</p><ul><li>列表 1</li><li>列表 2</li></ul><p>第三個段落。</p>')</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-drag-handle :editor /> </admin-rich-editor></template><script setup lang="ts">import { ref } from 'vue'import { AdminEditorDragHandle } from '@/registry/admin/ui/editor-drag-handle'import { AdminEditorToolbar, defaultEditorItems } from '@/registry/admin/ui/editor-toolbar'import { AdminRichEditor } from '@/registry/admin/ui/rich-editor'const value = ref('<p>hover 我，左側會出現拖曳把手。</p>')</script><template> <admin-rich-editor v-slot="{ editor }" v-model="value"> <admin-editor-toolbar :editor :items="defaultEditorItems" /> <admin-editor-drag-handle :editor /> </admin-rich-editor></template>API 參考
admin-editor-drag-handle
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
editor* | Editor | — | — |
class | ClassValue | — | — |
* 代表必填
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
注意事項
- 預設不啟用：
@admin/rich-editor本身不顯示 drag handle；未安裝本包則無拖曳把手。 - 最小官方包裝：本元件僅轉發
editor、提供預設 grip，定位採官方@tiptap/extension-drag-handle-vue-3預設（left-start）。需自訂 icon 改用 default slot；需 node 變更 callback 或點擊選取等行為，請直接使用官方DragHandle的onNodeChange/computePositionConfig。 - 裁切限制：把手 append 於編輯器內容層，若超出編輯器
overflow-hidden邊界會被裁切（官方DragHandle無appendTo，無法 portal）。
更新紀錄
- feat: 新增 tiptap editor 元件系列273a0d0