編輯器

Editor Highlight

toolbar 文字底色按鈕與色板；標示選取文字。

安裝

Terminal

pnpm dlx shadcn-vue add @admin/editor-highlightpnpm add @tiptap/extension-highlight

import Highlight from '@tiptap/extension-highlight'import {  AdminEditorHighlightButton,  defaultHighlightSwatches} from '@/registry/admin/ui/editor-highlight'

含 toolbar 按鈕與色板；底色能力來自 tiptap Highlight，需自行注入（見下方用法）。

用法

加入文字底色需三個步驟：在 :extensions 注入 Highlight.configure({ multicolor: true })、在 toolbar items 加入一個指定 slot: 'highlight' 的項目、在 toolbar 的 #highlight slot 放入 <AdminEditorHighlightButton>。

<script setup lang="ts">import type { JSONContent } from '@tiptap/core'import type { EditorToolbarItem } from '@/components/admin/editor-toolbar'import { IconHighlight } from '@tabler/icons-vue'import Highlight from '@tiptap/extension-highlight'import { ref } from 'vue'import { cn } from '@/lib/utils'import { baseProseClass } from '@/components/admin/editor'import {  AdminEditorHighlightButton,  defaultHighlightSwatches} from '@/components/admin/editor-highlight'import { AdminEditorToolbar, defaultEditorItems } from '@/components/admin/editor-toolbar'import { AdminRichEditor, starterKitProseClass } from '@/components/admin/rich-editor'const value = ref<JSONContent | string>(  '<p>選取文字後,用 toolbar 最右側的螢光筆鈕設定文字底色。</p>')// 文字底色需自行注入官方 Highlight extension（multicolor 允許自訂色碼）const extensions = [Highlight.configure({ multicolor: true })]// highlight picker 為 kindless slot item：靠具名 slot 自畫，不綁 handlerconst items: EditorToolbarItem[][] = [  ...defaultEditorItems,  [{ slot: 'highlight', icon: IconHighlight, label: '文字底色', tooltip: { text: '文字底色' } }]]</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;picker 從外層 v-slot 的 editor 取 -->      <template #highlight>        <admin-editor-highlight-button :editor="editor" :swatches="defaultHighlightSwatches" />      </template>    </admin-editor-toolbar>  </admin-rich-editor></template>

<script setup lang="ts">import type { EditorToolbarItem } from '@/registry/admin/ui/editor-toolbar'import { IconHighlight } from '@tabler/icons-vue'import Highlight from '@tiptap/extension-highlight'import { ref } from 'vue'import {  AdminEditorHighlightButton,  defaultHighlightSwatches} from '@/registry/admin/ui/editor-highlight'import { AdminEditorToolbar, defaultEditorItems } from '@/registry/admin/ui/editor-toolbar'import { AdminRichEditor } from '@/registry/admin/ui/rich-editor'const value = ref('<p>內容</p>')// 自行注入官方 Highlight extension（multicolor 屬於 schema，建立後不可改）const extensions = [Highlight.configure({ multicolor: true })]// highlight picker 是 kindless slot item：由具名 slot 渲染，不綁 handlerconst items: EditorToolbarItem[][] = [  ...defaultEditorItems,  [{ slot: 'highlight', icon: IconHighlight, label: '文字底色', tooltip: { text: '文字底色' } }]]</script><template>  <admin-rich-editor v-slot="{ editor }" v-model="value" :extensions="extensions">    <admin-editor-toolbar :items="items">      <template #highlight>        <admin-editor-highlight-button :editor="editor" :swatches="defaultHighlightSwatches" />      </template>    </admin-editor-toolbar>  </admin-rich-editor></template>

API 參考

admin-editor-highlight-button

Props

名稱	型別	預設值	說明
`editor`*	`Editor`	—	—
`swatches`	`ColorPickerSwatch<string>[] \| undefined`	—	色板；預設 `defaultHighlightSwatches`
`disabled`	`boolean \| undefined`	`false`	—
`class`	`unknown`	—	—

* 代表必填

注意事項

extension 必須在建立編輯器時注入：Highlight 無法於編輯器建立後補上，未注入時底色按鈕會呈 disabled、無法套用。
色板需自行提供：使用本元件的 defaultHighlightSwatches，或透過 props 傳入自訂色板。

更新紀錄

此元件尚無更新紀錄。

Editor Text Color

toolbar 文字顏色按鈕與色板；套用至選取文字。

Editor TextAlign

toolbar 對齊按鈕；標題／段落左中右。