AioEditor

<script setup lang="ts">import { ref } from 'vue'import { AdminAioEditor } from '@/components/admin/aio-editor'​const content = ref(`  <h2>AioEditor</h2>  <p>config 驅動的富文本編輯器，預設 toolbar 即包含<strong>格式</strong>、<em>樣式</em>、清單與區塊工具。</p>  <ul>    <li>項目清單</li>    <li>支援 <code>行內程式碼</code> 與 <mark>螢光標記</mark></li>  </ul>  <blockquote><p>引用區塊</p></blockquote>`)</script>​<template>  <admin-aio-editor v-model="content" /></template>

<script setup lang="ts">import type { AioEditorConfig } from '@/components/admin/aio-editor'import { IconSparkles } from '@tabler/icons-vue'import { ref } from 'vue'import { AdminAioEditor, AioEditorFeature } from '@/components/admin/aio-editor'​const content = ref('<p>精簡 toolbar：只放常用按鈕，並示範 Custom 按鈕。</p>')​const config: AioEditorConfig = {  features: [    AioEditorFeature.FontBold,    AioEditorFeature.FontItalic,    AioEditorFeature.Highlight,    AioEditorFeature.Divider,    AioEditorFeature.BulletList,    AioEditorFeature.Blockquote,    AioEditorFeature.Divider,    {      kind: AioEditorFeature.Custom,      label: '插入問候',      icon: IconSparkles,      run: (editor) => editor.chain().focus().insertContent('👋 你好！').run()    }  ],  // bubble 跟隨 features 宣告自動掛載（此處僅 BulletList 會帶 List bubble）；drag handle 另關  dragHandle: false}</script>​<template>  <admin-aio-editor v-model="content" :config="config" /></template>

<script setup lang="ts">import type { AioEditorConfig } from '@/components/admin/aio-editor'import { ref } from 'vue'import { AdminAioEditor, AioEditorFeature } from '@/components/admin/aio-editor'​const content = ref(`  <p>將游標移入表格即出現欄 / 列控制 bubble：可增刪欄列、合併與拆分儲存格。</p>  <table>    <tbody>      <tr>        <th>項目</th>        <th>說明</th>      </tr>      <tr>        <td>欄寬</td>        <td>拖曳框線調整（resizable）</td>      </tr>      <tr>        <td>控制項</td>        <td>Table / TableColumn / TableRow 三種 bubble 跟隨游標位置</td>      </tr>    </tbody>  </table>`)​const config: AioEditorConfig = {  features: [    AioEditorFeature.Undo,    AioEditorFeature.Redo,    AioEditorFeature.Divider,    AioEditorFeature.FontBold,    AioEditorFeature.Divider,    AioEditorFeature.Table  ]}</script>​<template>  <admin-aio-editor v-model="content" :config="config" /></template>

<script setup lang="ts">import type { AioEditorConfig } from '@/components/admin/aio-editor'import { ref } from 'vue'import { AdminAioEditor, AioEditorFeature } from '@/components/admin/aio-editor'​const content = ref(`  <p>點選圖片即出現 Image bubble：可切換對齊、調整寬度或移除。</p>  <img src="/demo/sample.gif" alt="範例圖片" />`)​// requestUrl 為 Link / Image / Video 之 URL 輸入來源；未提供時 fallback 為 window.prompt。// 實務上這裡接上傳對話框或素材庫，回傳 null 代表取消。const config: AioEditorConfig = {  features: [    AioEditorFeature.Undo,    AioEditorFeature.Redo,    AioEditorFeature.Divider,    AioEditorFeature.AlignLeft,    AioEditorFeature.AlignCenter,    AioEditorFeature.Divider,    AioEditorFeature.Image  ],  toolbarOptions: {    requestUrl: ({ kind, previous }) => {      if (kind !== 'image') {        return previous ?? null      }      return '/demo/sample.gif'    }  }}</script>​<template>  <admin-aio-editor v-model="content" :config="config" /></template>

<script setup lang="ts">import { ref } from 'vue'import { cn } from '@/lib/utils'import { AdminAioEditor, adminAioEditorProseClass } from '@/components/admin/aio-editor'​const content = ref(`  <h3>發布預覽</h3>  <p>左側編輯，右側即為<strong>前台渲染</strong>結果——同一份 prose 樣式。</p>  <ul>    <li>清單與 <code>行內程式碼</code></li>  </ul>  <blockquote><p>引用區塊</p></blockquote>`)</script>​<template>  <div    :class="`      grid w-full gap-4      lg:grid-cols-2    `"  >    <admin-aio-editor v-model="content" />    <div      :class="cn(`rounded-[6px] border border-dashed border-text-30 p-3`, adminAioEditorProseClass)"      v-html="content"    ></div>  </div></template>

<script setup lang="ts">import type { SuggestionProps } from '@tiptap/suggestion'import type { AioEditorConfig } from '@/components/admin/aio-editor'import { ref } from 'vue'import { cn } from '@/lib/utils'import {  AdminAioEditor,  AioEditorCoreExtension,  AioEditorFeature,  mentionSuggestion} from '@/components/admin/aio-editor'​const content = ref('<p>輸入 @ 觸發 mention 選單。</p>')​const MEMBERS = ['王小明', '陳美麗', '林大同', '張雅婷']​// mention 選單為 consumer 自行實作：以 runtime hooks 掛一個最小清單 UIfunction renderMenu(mountEl: HTMLElement, props: SuggestionProps) {  mountEl.innerHTML = ''  const items = MEMBERS.filter((name) => name.includes(props.query))  for (const name of items) {    const button = document.createElement('button')    button.type = 'button'    button.textContent = name    button.className = 'aio-mention-option'    button.addEventListener('mousedown', (event) => {      event.preventDefault()      props.command({ id: name, label: name })    })    mountEl.appendChild(button)  }  return mountEl}​const config: AioEditorConfig = {  include: [AioEditorCoreExtension.Mention],  extensionsConfig: {    Mention: {      suggestion: {        ...mentionSuggestion({          onRender: (props, mountEl) => renderMenu(mountEl!, props as SuggestionProps),          onUpdate: (props, componentEl) => {            if (componentEl) {              renderMenu(componentEl, props as SuggestionProps)            }          }        }),        items: ({ query }) => MEMBERS.filter((name) => name.includes(query))      }    }  },  features: [AioEditorFeature.FontBold, AioEditorFeature.FontItalic],  dragHandle: false}</script>​<template>  <admin-aio-editor    v-model="content"    :class="      cn(`        [&_.aio-mention-option]:block [&_.aio-mention-option]:w-full        [&_.aio-mention-option]:rounded-[4px] [&_.aio-mention-option]:px-3        [&_.aio-mention-option]:py-1 [&_.aio-mention-option]:text-left        [&_.aio-mention-option]:hover:bg-bg-70        [&_.editor-mention]:text-primary-40        [&_.editor-suggestion]:z-10 [&_.editor-suggestion]:rounded-[6px]        [&_.editor-suggestion]:border [&_.editor-suggestion]:border-text-30        [&_.editor-suggestion]:bg-bg-90 [&_.editor-suggestion]:p-1 [&_.editor-suggestion]:shadow-md      `)    "    :config="config"  /></template>