編輯器
Editor TextAlign
toolbar 對齊按鈕；標題／段落左中右。
安裝
Terminal
pnpm dlx shadcn-vue add @admin/editor-text-alignpnpm add @tiptap/extension-text-alignimport TextAlign from '@tiptap/extension-text-align'import { AdminEditorTextAlignButton } from '@/registry/admin/ui/editor-text-align'含並排左／中／右三顆對齊按鈕；對齊能力來自 tiptap TextAlign，需自行注入（見下方用法）。
用法
加入對齊按鈕需三個步驟：在 :extensions 注入 TextAlign.configure({ types: ['heading', 'paragraph'] })、在 toolbar items 加入一個指定 slot: 'textAlign' 的項目、在 toolbar 的 #textAlign slot 放入 <AdminEditorTextAlignButton>。
<script setup lang="ts">import type { JSONContent } from '@tiptap/core'import type { EditorToolbarItem } from '@/components/admin/editor-toolbar'import { IconAlignLeft } from '@tabler/icons-vue'import TextAlign from '@tiptap/extension-text-align'import { ref } from 'vue'import { cn } from '@/lib/utils'import { baseProseClass } from '@/components/admin/editor'import { AdminEditorTextAlignButton } from '@/components/admin/editor-text-align'import { AdminEditorToolbar, defaultEditorItems } from '@/components/admin/editor-toolbar'import { AdminRichEditor, starterKitProseClass } from '@/components/admin/rich-editor'const value = ref<JSONContent | string>( '<h2 style="text-align: center">置中標題</h2><p style="text-align: right">這段靠右對齊。</p><p>這段為預設靠左。</p>')// 對齊需自行注入官方 TextAlign extensionconst extensions = [TextAlign.configure({ types: ['heading', 'paragraph'] })]// 對齊按鈕為 kindless slot item：靠具名 slot 放入並排三顆對齊鈕元件，不綁 handlerconst items: EditorToolbarItem[][] = [ ...defaultEditorItems, [{ slot: 'textAlign', icon: IconAlignLeft, label: '對齊' }]]</script><template> <admin-rich-editor v-slot="{ editor, handlers }" v-model="value" :extensions="extensions" :ui="{ base: cn(baseProseClass, starterKitProseClass) }" > <admin-editor-toolbar :editor :handlers="handlers" :items="items"> <!-- slot props 不含 editor；對齊元件從外層 v-slot 的 editor 取 --> <template #textAlign> <admin-editor-text-align-button :editor="editor" /> </template> </admin-editor-toolbar> </admin-rich-editor></template><script setup lang="ts">import type { EditorToolbarItem } from '@/registry/admin/ui/editor-toolbar'import { IconAlignLeft } from '@tabler/icons-vue'import TextAlign from '@tiptap/extension-text-align'import { ref } from 'vue'import { AdminEditorTextAlignButton } from '@/registry/admin/ui/editor-text-align'import { AdminEditorToolbar, defaultEditorItems } from '@/registry/admin/ui/editor-toolbar'import { AdminRichEditor } from '@/registry/admin/ui/rich-editor'const value = ref('<p>內容</p>')const extensions = [TextAlign.configure({ types: ['heading', 'paragraph'] })]const items: EditorToolbarItem[][] = [ ...defaultEditorItems, [{ slot: 'textAlign', icon: IconAlignLeft, label: '對齊' }]]</script><template> <admin-rich-editor v-slot="{ editor }" v-model="value" :extensions="extensions"> <admin-editor-toolbar :items="items"> <template #textAlign> <admin-editor-text-align-button :editor="editor" /> </template> </admin-editor-toolbar> </admin-rich-editor></template>注入後 setTextAlign('left' | 'center' | 'right') command 即可用，AdminEditorTextAlignButton 每顆按鈕會依游標所在段落的對齊狀態高亮。
進階 configure
需要新增可對齊的 node type 或改預設對齊，自行用 TextAlign.configure({...})：
<script setup lang="ts">import TextAlign from '@tiptap/extension-text-align'const customTextAlign = TextAlign.configure({ types: ['heading', 'paragraph'], defaultAlignment: 'left'})</script>API 參考
admin-editor-text-align-button
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
editor* | Editor | — | — |
aligns | TextAlignKind[] | undefined | ["left", "center", "right"] | 要顯示的對齊選項與順序；預設 `['left', 'center', 'right']` |
disabled | boolean | undefined | false | — |
class | unknown | — | — |
* 代表必填
@tiptap/extension-text-align 套件 API 詳見 tiptap text-align 官方文件。
注意事項
- extension 必須在建立編輯器時注入：
TextAlign無法於編輯器建立後補上，未注入時對齊按鈕不會生效。 - 僅支援左/中/右三值：不含 justify；需要 justify 請自行擴充按鈕與
TextAlign.configure。
更新紀錄
此元件尚無更新紀錄。