編輯器

Editor Text Color

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

安裝

Terminal

pnpm dlx shadcn-vue add @admin/editor-text-colorpnpm add @tiptap/extension-text-style @tiptap/extension-color

import { Color } from '@tiptap/extension-color'import { TextStyle } from '@tiptap/extension-text-style'import {  AdminEditorTextColorButton,  defaultColorSwatches} from '@/registry/admin/ui/editor-text-color'

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

用法

加入文字顏色需三個步驟：在 :extensions 注入 [TextStyle, Color]、在 toolbar items 加入一個指定 slot: 'color' 的項目、在 toolbar 的 #color slot 放入 <AdminEditorTextColorButton>。

<script setup lang="ts">import type { JSONContent } from '@tiptap/core'import type { EditorToolbarItem } from '@/components/admin/editor-toolbar'import { IconLetterA } from '@tabler/icons-vue'import { Color } from '@tiptap/extension-color'import { TextStyle } from '@tiptap/extension-text-style'import { ref } from 'vue'import { cn } from '@/lib/utils'import { baseProseClass } from '@/components/admin/editor'import {  AdminEditorTextColorButton,  defaultColorSwatches} from '@/components/admin/editor-text-color'import { AdminEditorToolbar, defaultEditorItems } from '@/components/admin/editor-toolbar'import { AdminRichEditor, starterKitProseClass } from '@/components/admin/rich-editor'const value = ref<JSONContent | string>('<p>選取文字後,用 toolbar 最右側的 A 鈕設定文字顏色。</p>')// 文字顏色需自行注入官方 extension:Color 依賴 TextStyle，兩者都要const extensions = [TextStyle, Color]// color picker 為 kindless slot item：靠具名 slot 自畫，不綁 handlerconst items: EditorToolbarItem[][] = [  ...defaultEditorItems,  [{ slot: 'color', icon: IconLetterA, 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 #color>        <admin-editor-text-color-button :editor="editor" :swatches="defaultColorSwatches" />      </template>    </admin-editor-toolbar>  </admin-rich-editor></template>

<script setup lang="ts">import type { EditorToolbarItem } from '@/registry/admin/ui/editor-toolbar'import { IconLetterA } from '@tabler/icons-vue'import { Color } from '@tiptap/extension-color'import { TextStyle } from '@tiptap/extension-text-style'import { ref } from 'vue'import {  AdminEditorTextColorButton,  defaultColorSwatches} from '@/registry/admin/ui/editor-text-color'import { AdminEditorToolbar, defaultEditorItems } from '@/registry/admin/ui/editor-toolbar'import { AdminRichEditor } from '@/registry/admin/ui/rich-editor'const value = ref('<p>內容</p>')// 自行注入官方 extension（Color 依賴 TextStyle）const extensions = [TextStyle, Color]// color picker 是 kindless slot item：由具名 slot 渲染，不綁 handlerconst items: EditorToolbarItem[][] = [  ...defaultEditorItems,  [{ slot: 'color', icon: IconLetterA, label: '文字顏色', tooltip: { text: '文字顏色' } }]]</script><template>  <admin-rich-editor v-slot="{ editor }" v-model="value" :extensions="extensions">    <admin-editor-toolbar :items="items">      <template #color>        <admin-editor-text-color-button :editor="editor" :swatches="defaultColorSwatches" />      </template>    </admin-editor-toolbar>  </admin-rich-editor></template>

API 參考

admin-editor-text-color-button

Props

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

* 代表必填

注意事項

extension 必須在建立編輯器時注入：TextStyle 與 Color 無法於編輯器建立後補上，未注入時顏色按鈕不會生效。
色板需自行提供：使用本元件的 defaultColorSwatches，或透過 props 傳入自訂色板。

更新紀錄

此元件尚無更新紀錄。

Editor Code Block

程式碼區塊；語言選擇與語法上色。

Editor Highlight

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