編輯器
Editor Placeholder
內容為空時顯示提示文字。
安裝
Terminal
pnpm add @tiptap/extension-placeholderimport Placeholder from '@tiptap/extension-placeholder'placeholder 來自 tiptap Placeholder；admin-rich-editor／admin-editor 不內建，需自行安裝並注入 :extensions。空狀態視覺 CSS 依下方片段自行套用。
用法
<script setup lang="ts">import type { JSONContent } from '@tiptap/core'import Placeholder from '@tiptap/extension-placeholder'import { ref } from 'vue'import { cn } from '@/lib/utils'import { baseProseClass } from '@/components/admin/editor'import { AdminRichEditor, starterKitProseClass } from '@/components/admin/rich-editor'const value = ref<JSONContent | string>('')// placeholderExtension 為零配置預設；自訂文字用 Placeholder.configure({ placeholder })const extensions = [Placeholder.configure({ placeholder: '開始輸入內容…' })]// empty-state 視覺 CSS 不內含於包，透過 class 落 root,descendant selector 命中內容const placeholderClass = ` [&_p.is-editor-empty:first-child]:before:pointer-events-none [&_p.is-editor-empty:first-child]:before:float-left [&_p.is-editor-empty:first-child]:before:h-0 [&_p.is-editor-empty:first-child]:before:text-text-40 [&_p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)]`</script><template> <admin-rich-editor v-model="value" :extensions="extensions" :ui="{ base: cn(baseProseClass, starterKitProseClass, placeholderClass) }" /></template><script setup lang="ts">import Placeholder from '@tiptap/extension-placeholder'import { ref } from 'vue'import { AdminRichEditor } from '@/registry/admin/ui/rich-editor'const value = ref('')// 空狀態 CSS 經 :ui.base 套到 editor content 元素const placeholderClass = ` [&_p.is-editor-empty:first-child]:before:pointer-events-none [&_p.is-editor-empty:first-child]:before:float-left [&_p.is-editor-empty:first-child]:before:h-0 [&_p.is-editor-empty:first-child]:before:text-text-40 [&_p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)]`</script><template> <admin-rich-editor v-model="value" :extensions="[Placeholder.configure({ placeholder: '開始輸入內容…' })]" :ui="{ base: placeholderClass }" /></template>空狀態 CSS 說明
Placeholder extension 會在空節點加上 is-editor-empty class，並把 placeholder 文字放在 data-placeholder attr。上方片段以 ::before 偽元素把該 attr 渲染出來。
- 僅首行：用
p.is-editor-empty:first-child（如範例） - 每一空行：改用
.is-empty，並改注入Placeholder.configure({ showOnlyCurrent: false })
顏色使用 admin design token text-40，可依需要調整。
API 參考
@tiptap/extension-placeholder 套件 API 詳見 tiptap placeholder 官方文件。