編輯器
Editor Table
插入表格；Notion 式欄／列 grip 選取與操作。
安裝
Terminal
pnpm add @tiptap/extension-tablepnpm dlx shadcn-vue add @admin/editor-tableimport { TableKit } from '@tiptap/extension-table'import { AdminEditorTableControls, createTableHandler, editorTableClass} from '@/registry/admin/ui/editor-table'含 Notion 式 grip 控制層（AdminEditorTableControls）、toolbar handler（createTableHandler）與表格樣式（editorTableClass）；表格能力來自 tiptap TableKit，需自行注入（見下方用法）。
用法
把 TableKit.configure(...) 注入 :extensions、createTableHandler() 注入 :handlers，並將 <AdminEditorTableControls> 放進 default slot。游標移入表格即浮出欄 / 列 grip。
<script setup lang="ts">import type { JSONContent } from '@tiptap/core'import type { EditorToolbarItem } from '@/components/admin/editor-toolbar'import { IconTable } from '@tabler/icons-vue'import { TableKit } from '@tiptap/extension-table'import { ref } from 'vue'import { cn } from '@/lib/utils'import { baseProseClass } from '@/components/admin/editor'import { AdminEditorDragHandle } from '@/components/admin/editor-drag-handle'import { AdminEditorTableControls, createTableHandler, editorTableClass} from '@/components/admin/editor-table'import { AdminEditorToolbar, defaultEditorItems } from '@/components/admin/editor-toolbar'import { AdminRichEditor, starterKitProseClass } from '@/components/admin/rich-editor'const value = ref<JSONContent | string>( `<p>下方為表格,游標移入後欄頂 / 列左會浮出 grip,點擊選取整欄 / 列並開啟選單,可插入 / 刪除欄列、切換首欄列標題或刪除表格;右緣 / 底緣的「+」可在末端加欄 / 列。</p> <table> <tbody> <tr><th>項目</th><th>數量</th><th>備註</th></tr> <tr><td>蘋果</td><td>3</td><td>紅富士</td></tr> <tr><td>香蕉</td><td>5</td><td>進口</td></tr> </tbody> </table> <p>toolbar 的插入表格按鈕會插入一個 3×3 含標題列的表格。</p>`)// opt-in：自行注入官方 TableKit 與 table handlerconst extensions = [TableKit.configure({ table: { resizable: true } })]const handlers = { table: createTableHandler() }// 預設 toolbar（純 StarterKit）後面 append 插入表格按鈕const items: EditorToolbarItem[][] = [ ...defaultEditorItems, [{ kind: 'table', icon: IconTable, 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, editorTableClass) }" > <admin-editor-toolbar :editor :handlers="mergedHandlers" :items="items" /> <admin-editor-drag-handle :editor /> <admin-editor-table-controls :editor /> </admin-rich-editor></template><script setup lang="ts">import type { EditorToolbarItem } from '@/registry/admin/ui/editor-toolbar'import { IconTable } from '@tabler/icons-vue'import { TableKit } from '@tiptap/extension-table'import { ref } from 'vue'import { AdminEditorTableControls, createTableHandler, editorTableClass} from '@/registry/admin/ui/editor-table'import { AdminEditorToolbar, defaultEditorItems } from '@/registry/admin/ui/editor-toolbar'import { AdminRichEditor } from '@/registry/admin/ui/rich-editor'const value = ref('<p>表格內容。</p>')const extensions = [TableKit.configure({ table: { resizable: true } })]const handlers = { table: createTableHandler() }const items: EditorToolbarItem[][] = [ ...defaultEditorItems, [{ kind: 'table', icon: IconTable, label: '插入表格', tooltip: { text: '插入表格' } }]]</script><template> <admin-rich-editor v-slot="{ editor }" v-model="value" :class="editorTableClass" :extensions="extensions" :handlers="handlers" > <admin-editor-toolbar :editor :items="items" /> <admin-editor-table-controls :editor /> </admin-rich-editor></template>啟用後：
- toolbar 的插入表格按鈕插入 3×3 含標題列的表格
- 游標移入表格時，欄頂 / 列左浮出 grip；點 grip 選取整欄 / 列並開啟選單，可在前後 / 上下插入欄列、刪除欄列、刪除表格
- 第 1 欄 grip 選單含「設為標題欄」、第 1 列 grip 選單含「設為標題列」（切換首欄 / 首列的
th） - 表格右緣 / 底緣 hover 浮出「+」條，點擊在末端追加一欄 / 一列
- 預設開啟欄寬拖曳（
resizable），拖曳欄邊界調整寬度 - read-only（
:editable="false"）時不顯示任何 grip 與「+」控制層
進階 configure
需要關閉欄寬拖曳或調整其他設定，自行 TableKit.configure(...)：
const tableKit = TableKit.configure({ table: { resizable: false } })API 參考
admin-editor-table-controls
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
editor* | Editor | — | tiptap editor 實例，由 `<AdminRichEditor>` default slot 暴露後傳入 |
class | ClassValue | — | 併入控制層容器的 class |
* 代表必填
createTableHandler()
回傳 toolbar handler，以 { kind: 'table' } 觸發插入 3×3 含標題列的表格。
editorTableClass
表格外觀的 Tailwind class 字串，append 到 editor 的 :class。
注意事項
- 需要 TableKit：
<AdminEditorTableControls>依賴 editor 註冊 table extension；未以TableKit.configure(...)經:extensions注入時，dev 會console.warn且控制層不作用。 - 欄寬拖曳需要
editorTableClass：其中 column resize handle 的樣式由editorTableClass提供，未 append 時拖曳功能仍在但無視覺提示。 - 標題切換僅限首欄 / 首列：對齊 Notion，只有第 1 欄 / 第 1 列可切換為標題；grip 選單僅於首欄 / 首列顯示對應切換項。
- 互動為 pointer 導向：以滑鼠 hover / 點擊操作 grip 與「+」，不提供鍵盤焦點導航；鍵盤使用者仍可用 toolbar 插入、方向鍵移動與官方表格快捷鍵。
- 不支援 SSR：表格 grip 與欄寬拖曳依賴瀏覽器 DOM；元件殼不含
<ClientOnly>。Nuxt 請自行以<ClientOnly>包覆，其他 SSR 框架用等價機制；純 CSR 不需處理。見 安裝 · SSR。
更新紀錄
此元件尚無更新紀錄。