編輯器

Editor Video

顯示影片；以程式插入原生 video。

安裝

editor-video 自帶 Video node（以 @tiptap/core 自製，無需額外安裝 tiptap extension 套件）。

Terminal

pnpm dlx shadcn-vue add @admin/editor-video

import { createVideoHandler, Video } from '@/registry/admin/ui/editor-video'

把本包的 Video node 傳入 :extensions、createVideoHandler 經 :handlers 注入後，toolbar 可放 { kind: 'video' } 按鈕（見下方用法）。

用法

<script setup lang="ts">import type { JSONContent } from '@tiptap/core'import type { EditorToolbarItem } from '@/components/admin/editor-toolbar'import { IconMovie } from '@tabler/icons-vue'import { ref } from 'vue'import { cn } from '@/lib/utils'import { baseProseClass } from '@/components/admin/editor'import { AdminEditorToolbar, defaultEditorItems } from '@/components/admin/editor-toolbar'import { createVideoHandler, editorVideoClass, Video } from '@/components/admin/editor-video'import { AdminRichEditor, starterKitProseClass } from '@/components/admin/rich-editor'const value = ref<JSONContent | string>(  '<p>下方為 &lt;video&gt; 影片,toolbar 的插入影片按鈕會以 prompt 取網址後 setVideo。</p><video src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>')// opt-in：注入本包自帶的 Video node 與 video handlerconst extensions = [Video]const handlers = { video: createVideoHandler() }// 預設 toolbar（純 StarterKit）後面 append video 按鈕const items: EditorToolbarItem[][] = [  ...defaultEditorItems,  [{ kind: 'video', icon: IconMovie, label: '插入影片', tooltip: { text: '插入影片' } }]]</script><template>  <admin-rich-editor    v-slot="{ editor, handlers: mergedHandlers }"    v-model="value"    :extensions="extensions"    :handlers="handlers"    :ui="{ base: cn(baseProseClass, starterKitProseClass, editorVideoClass) }"  >    <admin-editor-toolbar :editor :handlers="mergedHandlers" :items="items" />  </admin-rich-editor></template>

<script setup lang="ts">import type { EditorToolbarItem } from '@/registry/admin/ui/editor-toolbar'import { IconMovie } from '@tabler/icons-vue'import { ref } from 'vue'import { AdminEditorToolbar, defaultEditorItems } from '@/registry/admin/ui/editor-toolbar'import { createVideoHandler, Video } from '@/registry/admin/ui/editor-video'import { AdminRichEditor } from '@/registry/admin/ui/rich-editor'const value = ref('<p>影片：<video src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video></p>')const extensions = [Video]const handlers = { video: createVideoHandler() }const items: EditorToolbarItem[][] = [  ...defaultEditorItems,  [{ kind: 'video', icon: IconMovie, label: '插入影片', tooltip: { text: '插入影片' } }]]</script><template>  <admin-rich-editor v-model="value" :extensions="extensions" :handlers="handlers">    <admin-editor-toolbar :items="items" />  </admin-rich-editor></template>

啟用後：

<video> 顯示不會被 tiptap parser 丟掉
editor.commands.setVideo({ src }) 可程式式插入影片
序列化輸出為原始 <video src="..." controls>（HTML）或 video node attrs（JSON）

src 來源與上傳

createVideoHandler 只處理網址：缺 src 時以 window.prompt 要一個 URL。檔案上傳流程不內建於本包，請自行以 :handlers 覆寫 video handler 接上上傳端點。

src 不做白名單

src 直接寫入 <video src>，本包不驗證網址；若 src 來源不可信，請於 consumer 端自行 sanitize。

屬性

Video node 屬性刻意最小化：

src（必備）：影片來源網址
controls（預設 true）：是否顯示原生播放控制列

poster / width / height / autoplay / loop / muted 等進階屬性未內建。

API 參考

匯出	說明
`Video`	自製 tiptap block atom node，傳入 `<AdminRichEditor :extensions>`
`createVideoHandler()`	回傳 `EditorHandler`，傳入 `<AdminRichEditor :handlers>` 的 `video` key

Editor Superscript / Subscript

toolbar 上標／下標按鈕；sup／sub 行內樣式。

Editor YouTube

嵌入 YouTube 影片；以程式插入。