編輯器
Editor Link Bubble
游標位於連結時浮出泡泡；檢視、編輯、移除。
安裝
Terminal
pnpm dlx shadcn-vue add @admin/editor-link-bubbleimport { AdminEditorLinkBubble } from '@/registry/admin/ui/editor-link-bubble'admin-editor-link-bubble 依賴 @admin/rich-editor。Link mark 由 @admin/rich-editor 的 StarterKit 提供，本包只負責浮層 UI。
用法
把 <AdminEditorLinkBubble> 放進 <AdminRichEditor> 的 default slot，並傳入 slot 暴露的 editor。游標移到既有連結上即浮出泡泡。
<script setup lang="ts">import type { JSONContent } from '@tiptap/core'import { ref } from 'vue'import { cn } from '@/lib/utils'import { baseProseClass } from '@/components/admin/editor'import { AdminEditorLinkBubble } from '@/components/admin/editor-link-bubble'import { AdminRichEditor, starterKitProseClass } from '@/components/admin/rich-editor'const value = ref<JSONContent | string>( `<p>第 1 段：捲動測試用內容,讓 editor 超過固定高度而出現內部捲軸。</p> <p>第 2 段：捲動測試用內容。</p> <p>第 3 段：捲動測試用內容。</p> <p>第 4 段：點此含<a href="https://example.com">連結</a>的文字，會浮出檢視 / 編輯 / 移除的泡泡。捲動時泡泡應跟隨此連結移動。</p> <p>第 5 段：捲動測試用內容。</p> <p>第 6 段：捲動測試用內容。</p> <p>第 7 段：捲動測試用內容。</p> <p>第 8 段：捲動測試用內容。</p> <p>第 9 段：捲動測試用內容。</p> <p>第 10 段：捲動測試用內容。</p>`)</script><template> <admin-rich-editor v-slot="{ editor }" v-model="value" class="max-h-[180px] overflow-y-auto" :ui="{ base: cn(baseProseClass, starterKitProseClass) }" > <admin-editor-link-bubble :editor /> </admin-rich-editor></template><script setup lang="ts">import { ref } from 'vue'import { AdminEditorLinkBubble } from '@/registry/admin/ui/editor-link-bubble'import { AdminEditorToolbar, defaultEditorItems } from '@/registry/admin/ui/editor-toolbar'import { AdminRichEditor } from '@/registry/admin/ui/rich-editor'const value = ref('<p>含<a href="https://example.com">連結</a>的內容。</p>')</script><template> <admin-rich-editor v-slot="{ editor }" v-model="value"> <admin-editor-toolbar :editor :items="defaultEditorItems" /> <admin-editor-link-bubble :editor /> </admin-rich-editor></template>API 參考
admin-editor-link-bubble
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
editor* | Editor | — | — |
class | ClassValue | — | — |
* 代表必填
注意事項
- 與預設 prompt 並存：未安裝本包時，toolbar 的 link 按鈕走
window.prompt；裝上本包後，選到連結會多一層浮層編輯體驗，兩者不衝突。 - 需要 Link mark：依賴 StarterKit 內建的 Link mark；若以
:starter-kit="{ link: false }"關閉 link，則本浮層不會出現。