admin/registry
編輯器

Editor Image

參考
顯示圖片；以程式插入 img。

安裝

Terminal
pnpm dlx shadcn-vue add @admin/editor-imagepnpm add @tiptap/extension-image
import { Image } from '@tiptap/extension-image'import { createImageHandler } from '@/registry/admin/ui/editor-image'

含 createImageHandler；圖片能力來自 tiptap Image，需自行注入。把 Image.configure({}) 傳入 :extensions、createImageHandler 經 :handlers 注入後，toolbar 可放 { kind: 'image' } 按鈕（見下方用法）。

用法

<script setup lang="ts">import type { JSONContent } from '@tiptap/core'import type { EditorToolbarItem } from '@/components/admin/editor-toolbar'import { IconPhoto } from '@tabler/icons-vue'import { Image } from '@tiptap/extension-image'import { ref } from 'vue'import { cn } from '@/lib/utils'import { baseProseClass } from '@/components/admin/editor'import { createImageHandler, editorImageClass } from '@/components/admin/editor-image'import { AdminEditorToolbar, defaultEditorItems } from '@/components/admin/editor-toolbar'import { AdminRichEditor, starterKitProseClass } from '@/components/admin/rich-editor'​const value = ref<JSONContent | string>(  '<p>下方為 &lt;img&gt; 圖片，toolbar 的插入圖片按鈕會以 prompt 取網址後 setImage。</p><img src="https://picsum.photos/seed/admin-image/800/360" alt="範例圖片">')​// opt-in：注入官方 Image extension 與 image handlerconst extensions = [Image.configure({})]const handlers = { image: createImageHandler() }​// 預設 toolbar（純 StarterKit）後面 append image 按鈕const items: EditorToolbarItem[][] = [  ...defaultEditorItems,  [{ kind: 'image', icon: IconPhoto, 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, editorImageClass) }"  >    <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 { IconPhoto } from '@tabler/icons-vue'import { Image } from '@tiptap/extension-image'import { ref } from 'vue'import { createImageHandler } from '@/registry/admin/ui/editor-image'import { AdminEditorToolbar, defaultEditorItems } from '@/registry/admin/ui/editor-toolbar'import { AdminRichEditor } from '@/registry/admin/ui/rich-editor'​const value = ref('<p>圖:<img src="https://picsum.photos/seed/admin-image/800/360" alt="x"></p>')​const extensions = [Image.configure({})]const handlers = { image: createImageHandler() }const items: EditorToolbarItem[][] = [  ...defaultEditorItems,  [{ kind: 'image', icon: IconPhoto, label: '插入圖片', tooltip: { text: '插入圖片' } }]]</script>​<template>  <admin-rich-editor v-model="value" :extensions="extensions" :handlers="handlers">    <admin-editor-toolbar :items="items" />  </admin-rich-editor></template>

啟用後：

  • <img> 顯示不會被 tiptap parser 丟掉
  • editor.commands.setImage({ src, alt }) 可程式式插入圖片
  • 序列化輸出為原始 <img src="...">（HTML）或 image node attrs（JSON）

進階 configure

需要 inline 圖片、允許 base64 等，自行用 Image.configure({...}) 建立 instance：

<script setup lang="ts">import { Image } from '@tiptap/extension-image'​const customImage = Image.configure({ inline: true, allowBase64: true })</script>​<template>  <admin-rich-editor v-model="value" :extensions="[customImage]" /></template>

API 參考

@tiptap/extension-image 套件 API 詳見 tiptap image 官方文件。

注意事項

  • extension 必須在建立編輯器時注入：Image 無法於編輯器建立後補上，未注入時 <img> 內容會被 parser 丟掉。

Editor Toolbar

admin-rich-editor 的工具列。layout：fixed／bubble／floating；可放按鈕、下拉選單與自訂元件。

Editor Emoji Menu

輸入 : 觸發浮動選單；挑選並插入 emoji。