vome-core 0.3.42 → 0.3.43

package/dist/admin/crud/components/vm-richtext.vue

@@ -17,153 +17,31 @@
       v-else
       class="vm-richtext__shell"
     >
-      <div
-        v-if="editor"
+      <Toolbar
         class="vm-richtext__toolbar"
-      >
-        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('bold') }" :title="crudLabel('rtBold')" @click="editor.chain().focus().toggleBold().run()"><i class="ri-bold" /></button>
-        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('italic') }" :title="crudLabel('rtItalic')" @click="editor.chain().focus().toggleItalic().run()"><i class="ri-italic" /></button>
-        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('underline') }" :title="crudLabel('rtUnderline')" @click="editor.chain().focus().toggleUnderline().run()"><i class="ri-underline" /></button>
-        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('strike') }" :title="crudLabel('rtStrike')" @click="editor.chain().focus().toggleStrike().run()"><i class="ri-strikethrough" /></button>
-        <span
-          class="vm-richtext__btn vm-richtext__color-btn"
-          :class="{ 'is-active': editor.isActive('highlight'), 'is-disabled': disabled }"
-          :title="crudLabel('rtBgColor')"
-          role="button"
-          @pointerdown="rememberSelection"
-        >
-          <i class="ri-mark-pen-line" aria-hidden="true" />
-          <span class="vm-richtext__color-bar" :style="{ background: highlightColor }" />
-          <vm-color-picker
-            class="vm-richtext__color-hit"
-            size="sm"
-            swatch-only
-            :enable-theme="false"
-            :disabled="disabled"
-            :model-value="highlightColor"
-            @update:model-value="applyHighlightColor"
-          />
-        </span>
-        <span
-          class="vm-richtext__btn vm-richtext__color-btn"
-          :class="{ 'is-active': Boolean(textColor && textColor !== '#111827'), 'is-disabled': disabled }"
-          :title="crudLabel('rtTextColor')"
-          role="button"
-          @pointerdown="rememberSelection"
-        >
-          <i class="ri-font-color" aria-hidden="true" />
-          <span class="vm-richtext__color-bar" :style="{ background: textColor }" />
-          <vm-color-picker
-            class="vm-richtext__color-hit"
-            size="sm"
-            swatch-only
-            :enable-theme="false"
-            :disabled="disabled"
-            :model-value="textColor"
-            @update:model-value="applyTextColor"
-          />
-        </span>
-        <span class="vm-richtext__sep" />
-        <select
-          class="vm-richtext__select"
-          :title="crudLabel('rtFontSize')"
-          :value="fontSize"
-          :disabled="disabled"
-          @change="onFontSizeChange"
-        >
-          <option value="">{{ crudLabel('rtFontSizeDefault') }}</option>
-          <option v-for="s in FONT_SIZES" :key="s" :value="`${s}px`">{{ s }}</option>
-        </select>
-        <span class="vm-richtext__sep" />
-        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }" :title="crudLabel('rtAlignLeft')" @click="editor.chain().focus().setTextAlign('left').run()"><i class="ri-align-left" /></button>
-        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }" :title="crudLabel('rtAlignCenter')" @click="editor.chain().focus().setTextAlign('center').run()"><i class="ri-align-center" /></button>
-        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }" :title="crudLabel('rtAlignRight')" @click="editor.chain().focus().setTextAlign('right').run()"><i class="ri-align-right" /></button>
-        <span class="vm-richtext__sep" />
-        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('bulletList') }" :title="crudLabel('rtBulletList')" @click="editor.chain().focus().toggleBulletList().run()"><i class="ri-list-unordered" /></button>
-        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('orderedList') }" :title="crudLabel('rtOrderedList')" @click="editor.chain().focus().toggleOrderedList().run()"><i class="ri-list-ordered" /></button>
-        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('taskList') }" :title="crudLabel('rtTaskList')" @click="editor.chain().focus().toggleTaskList().run()"><i class="ri-checkbox-line" /></button>
-        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('blockquote') }" :title="crudLabel('rtBlockquote')" @click="editor.chain().focus().toggleBlockquote().run()"><i class="ri-double-quotes-l" /></button>
-        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('codeBlock') }" :title="crudLabel('rtCodeBlock')" @click="editor.chain().focus().toggleCodeBlock().run()"><i class="ri-code-box-line" /></button>
-        <button type="button" class="vm-richtext__btn" :title="crudLabel('rtHr')" @click="editor.chain().focus().setHorizontalRule().run()"><i class="ri-separator" /></button>
-        <span class="vm-richtext__sep" />
-        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('link') }" :title="crudLabel('rtLink')" @click="toggleLink"><i class="ri-link" /></button>
-        <button v-if="uploadEnabled" type="button" class="vm-richtext__btn" :title="crudLabel('rtImage')" @click="pickImage"><i class="ri-image-line" /></button>
-        <button v-if="uploadEnabled" type="button" class="vm-richtext__btn" :title="crudLabel('rtVideo')" @click="pickVideo"><i class="ri-video-line" /></button>
-        <button
-          ref="emojiBtnRef"
-          type="button"
-          class="vm-richtext__btn"
-          :class="{ 'is-active': emojiOpen }"
-          :title="crudLabel('rtEmoji')"
-          @click="toggleEmoji"
-        >
-          <i class="ri-emotion-line" />
-        </button>
-        <Teleport to="body">
-          <div
-            v-if="emojiOpen"
-            ref="emojiPanelRef"
-            class="vm-richtext__emoji-panel vm-dialog-float"
-            :style="emojiPanelStyle"
-            @pointerdown.stop
-            @mousedown.stop
-          >
-            <button
-              v-for="(e, i) in VM_RICHTEXT_EMOJIS"
-              :key="i"
-              type="button"
-              class="vm-richtext__emoji-item"
-              @click.stop="insertEmoji(e)"
-            >
-              {{ e }}
-            </button>
-          </div>
-        </Teleport>
-        <span class="vm-richtext__sep" />
-        <button type="button" class="vm-richtext__btn" :title="crudLabel('rtTable')" @click="insertTable"><i class="ri-table-line" /></button>
-        <button type="button" class="vm-richtext__btn" :title="crudLabel('rtUndo')" :disabled="!editor.can().undo()" @click="editor.chain().focus().undo().run()"><i class="ri-arrow-go-back-line" /></button>
-        <button type="button" class="vm-richtext__btn" :title="crudLabel('rtRedo')" :disabled="!editor.can().redo()" @click="editor.chain().focus().redo().run()"><i class="ri-arrow-go-forward-line" /></button>
-      </div>
-
-      <EditorContent class="vm-richtext__content" :editor="editor" />
-      <vm-context-menu
-        ref="tableCtxRef"
-        :items="tableCtxItems"
-        :z-index="10050"
-        @select="onTableCtxSelect"
+        :editor="editorRef"
+        :default-config="toolbarConfig"
+        mode="default"
+      />
+      <Editor
+        class="vm-richtext__editor"
+        v-model="html"
+        :default-config="editorConfig"
+        mode="default"
+        @onCreated="handleCreated"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import '@wangeditor/editor/dist/css/style.css'
 import { crudLabel } from '../style'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+import { computed, onBeforeUnmount, shallowRef, watch } from 'vue'
 import DOMPurify from 'dompurify'
-import { EditorContent, useEditor } from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
-import Image from '@tiptap/extension-image'
-import Link from '@tiptap/extension-link'
-import Placeholder from '@tiptap/extension-placeholder'
-import Underline from '@tiptap/extension-underline'
-import TextAlign from '@tiptap/extension-text-align'
-import Highlight from '@tiptap/extension-highlight'
-import TextStyle from '@tiptap/extension-text-style'
-import Color from '@tiptap/extension-color'
-import TaskList from '@tiptap/extension-task-list'
-import TaskItem from '@tiptap/extension-task-item'
-import Table from '@tiptap/extension-table'
-import TableRow from '@tiptap/extension-table-row'
-import TableHeader from '@tiptap/extension-table-header'
-import TableCell from '@tiptap/extension-table-cell'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
 import { useUpload } from '../../hooks/useUpload'
-import { FONT_SIZES, FontSize, VM_RICHTEXT_EMOJIS, VmRichtextVideo } from './vm-richtext-extensions'
-import VmColorPicker from './vm-color-picker.vue'
-import VmContextMenu from './vm-context-menu.vue'
-import { CellSelection, cellAround } from '@tiptap/pm/tables'
-import type { Editor } from '@tiptap/core'
-import type { EditorView } from '@tiptap/pm/view'
-import type { CtxMenuItem } from '../../../../typings/admin/comm/crud'
 
 defineOptions({ name: 'vm-richtext' })
 
@@ -197,218 +75,8 @@ const props = withDefaults(
 const emit = defineEmits<{ 'update:modelValue': [v: string] }>()
 
 const { toUpload } = useUpload()
+const editorRef = shallowRef<IDomEditor>()
 const syncing = shallowRef(false)
-const uploading = shallowRef(false)
-const emojiOpen = shallowRef(false)
-const emojiBtnRef = shallowRef<HTMLElement>()
-const emojiPanelRef = shallowRef<HTMLElement>()
-const emojiPanelStyle = shallowRef<Record<string, string>>({})
-const textColor = ref('#111827')
-const highlightColor = ref('#fef08a')
-/** 当前选区字号；空串 = 默认（编辑区基线 14px） */
-const fontSize = ref('')
-/** 点开取色器前保存选区，避免焦点离开编辑器后丢标记范围 */
-let savedSelection: { from: number; to: number } | null = null
-
-const tableCtxRef = ref<{ open: (ev: MouseEvent) => void; close: () => void } | null>(null)
-const tableCtxItems = ref<CtxMenuItem[]>([])
-/** 右键按下时缓存多选，防止 mousedown 先把 CellSelection 清掉 */
-let pendingCellSel: { anchor: number; head: number } | null = null
-
-type TableCtxKey =
-  | 'addColumnBefore'
-  | 'addColumnAfter'
-  | 'addRowBefore'
-  | 'addRowAfter'
-  | 'deleteColumn'
-  | 'deleteRow'
-  | 'mergeCells'
-  | 'splitCell'
-
-function cellPosInSelection(sel: CellSelection, cellPos: number) {
-  let hit = false
-  sel.forEachCell((_node, pos) => {
-    if (pos === cellPos) hit = true
-  })
-  return hit
-}
-
-function restorePendingCellSelection(view: EditorView) {
-  if (!pendingCellSel) return false
-  try {
-    const sel = CellSelection.create(
-      view.state.doc,
-      pendingCellSel.anchor,
-      pendingCellSel.head,
-    )
-    view.dispatch(view.state.tr.setSelection(sel))
-    return true
-  } catch {
-    return false
-  }
-}
-
-/**
- * 右键 mousedown：表格插件会先清掉多选。
- * 若点在已有 CellSelection 内 → preventDefault 并记下选区，供 contextmenu 恢复。
- */
-function onTableMouseDown(view: EditorView, event: MouseEvent) {
-  if (event.button !== 2) {
-    pendingCellSel = null
-    return false
-  }
-  const target = event.target as HTMLElement | null
-  if (!target?.closest?.('td, th')) {
-    pendingCellSel = null
-    return false
-  }
-
-  const { selection } = view.state
-  if (!(selection instanceof CellSelection)) {
-    pendingCellSel = null
-    return false
-  }
-
-  pendingCellSel = {
-    anchor: selection.$anchorCell.pos,
-    head: selection.$headCell.pos,
-  }
-
-  const coords = view.posAtCoords({ left: event.clientX, top: event.clientY })
-  if (!coords) return false
-  const $cell = cellAround(view.state.doc.resolve(coords.pos))
-  if (!$cell) return false
-
-  if (cellPosInSelection(selection, $cell.pos)) {
-    event.preventDefault()
-    return true
-  }
-  return false
-}
-
-/** 右键落点：已在多选内则保留；否则选中该单元格作为参照 */
-function selectTableCellFromEvent(ed: Editor, event: MouseEvent) {
-  const view = ed.view
-  const coords = view.posAtCoords({ left: event.clientX, top: event.clientY })
-  if (!coords) return false
-  const $cell = cellAround(view.state.doc.resolve(coords.pos))
-  if (!$cell) return false
-
-  const { selection } = view.state
-  if (selection instanceof CellSelection && cellPosInSelection(selection, $cell.pos)) {
-    return true
-  }
-
-  // mousedown 已清多选时，用缓存恢复（且右键仍落在原多选内）
-  if (pendingCellSel) {
-    const probe = CellSelection.create(
-      view.state.doc,
-      pendingCellSel.anchor,
-      pendingCellSel.head,
-    )
-    if (cellPosInSelection(probe, $cell.pos)) {
-      return restorePendingCellSelection(view)
-    }
-  }
-
-  const tr = view.state.tr.setSelection(CellSelection.create(view.state.doc, $cell.pos))
-  view.dispatch(tr)
-  return true
-}
-
-function buildTableCtxItems(ed: Editor): CtxMenuItem[] {
-  const can = ed.can()
-  return [
-    {
-      key: 'addColumnBefore',
-      label: crudLabel('rtTableColBefore'),
-      disabled: !can.addColumnBefore(),
-    },
-    {
-      key: 'addColumnAfter',
-      label: crudLabel('rtTableColAfter'),
-      disabled: !can.addColumnAfter(),
-    },
-    {
-      key: 'addRowBefore',
-      label: crudLabel('rtTableRowBefore'),
-      disabled: !can.addRowBefore(),
-    },
-    {
-      key: 'addRowAfter',
-      label: crudLabel('rtTableRowAfter'),
-      disabled: !can.addRowAfter(),
-    },
-    {
-      key: 'deleteColumn',
-      label: crudLabel('rtTableDeleteCol'),
-      disabled: !can.deleteColumn(),
-    },
-    {
-      key: 'deleteRow',
-      label: crudLabel('rtTableDeleteRow'),
-      disabled: !can.deleteRow(),
-    },
-    {
-      key: 'mergeCells',
-      label: crudLabel('rtTableMerge'),
-      disabled: !can.mergeCells(),
-    },
-    {
-      key: 'splitCell',
-      label: crudLabel('rtTableSplit'),
-      disabled: !can.splitCell(),
-    },
-  ]
-}
-
-function onTableContextMenu(view: EditorView, event: MouseEvent) {
-  const ed = editor.value
-  if (!ed || ed.isDestroyed || props.disabled) return false
-  const target = event.target as HTMLElement | null
-  if (!target?.closest?.('td, th')) return false
-  if (!selectTableCellFromEvent(ed, event)) return false
-  event.preventDefault()
-  tableCtxItems.value = buildTableCtxItems(ed)
-  tableCtxRef.value?.open(event)
-  pendingCellSel = null
-  return true
-}
-
-function onTableCtxSelect(key: string) {
-  const ed = editor.value
-  if (!ed) return
-  const k = key as TableCtxKey
-  const chain = ed.chain().focus()
-  switch (k) {
-    case 'addColumnBefore':
-      chain.addColumnBefore().run()
-      break
-    case 'addColumnAfter':
-      chain.addColumnAfter().run()
-      break
-    case 'addRowBefore':
-      chain.addRowBefore().run()
-      break
-    case 'addRowAfter':
-      chain.addRowAfter().run()
-      break
-    case 'deleteColumn':
-      chain.deleteColumn().run()
-      break
-    case 'deleteRow':
-      chain.deleteRow().run()
-      break
-    case 'mergeCells':
-      chain.mergeCells().run()
-      break
-    case 'splitCell':
-      chain.splitCell().run()
-      break
-    default:
-      break
-  }
-}
 
 const readOnlyMode = computed(() => props.readonly)
 const uploadEnabled = computed(() => Boolean(props.uploadImage) || props.autoUpload !== false)
@@ -436,6 +104,8 @@ function normalizeHtml(html: string) {
 
 const safeHtml = computed(() => sanitize(String(props.modelValue || '')))
 
+const html = shallowRef(normalizeHtml(String(props.modelValue || '')) || '<p><br></p>')
+
 async function resolveUpload(file: File): Promise<string> {
   if (props.uploadImage) return props.uploadImage(file)
   if (props.autoUpload === false) throw new Error(crudLabel('noUploadImage'))
@@ -443,321 +113,67 @@ async function resolveUpload(file: File): Promise<string> {
   return res.url
 }
 
-async function insertImage(file: File) {
-  if (!editor.value || uploading.value) return
-  uploading.value = true
-  try {
-    const url = await resolveUpload(file)
-    editor.value.chain().focus().setImage({ src: url, alt: file.name || 'image' }).run()
-  } finally {
-    uploading.value = false
-  }
-}
-
-async function insertVideo(file: File) {
-  if (!editor.value || uploading.value) return
-  uploading.value = true
-  try {
-    const url = await resolveUpload(file)
-    editor.value.chain().focus().setVideo({ src: url }).run()
-  } finally {
-    uploading.value = false
-  }
-}
-
-function pickFile(accept: string, handler: (file: File) => void) {
-  const input = document.createElement('input')
-  input.type = 'file'
-  input.accept = accept
-  input.onchange = () => {
-    const file = input.files?.[0]
-    if (file) handler(file)
-  }
-  input.click()
-}
-
-function pickImage() {
-  pickFile('image/*', (file) => void insertImage(file))
-}
-
-function pickVideo() {
-  pickFile('video/*', (file) => void insertVideo(file))
-}
-
-function placeEmojiPanel() {
-  const btn = emojiBtnRef.value
-  if (!btn) return
-  const rect = btn.getBoundingClientRect()
-  // 10×28 + 9×2 gap + 16 padding
-  const panelW = 314
-  const panelH = 280
-  const gap = 6
-  const pad = 8
-  // 右缘对齐按钮（往左展开，避免溢出大弹窗右侧）
-  let left = rect.right - panelW
-  let top = rect.bottom + gap
-
-  const host =
-    (btn.closest('[data-slot="dialog-content"]') as HTMLElement | null) ||
-    (btn.closest('.vm-dialog-shell-crud') as HTMLElement | null)
-  const bound = host?.getBoundingClientRect() ?? {
-    left: pad,
-    right: window.innerWidth - pad,
-    top: pad,
-    bottom: window.innerHeight - pad,
-  }
-
-  left = Math.min(left, bound.right - panelW - pad)
-  left = Math.max(left, bound.left + pad)
-  if (top + panelH > bound.bottom - pad) {
-    top = Math.max(bound.top + pad, rect.top - panelH - gap)
-  }
-
-  emojiPanelStyle.value = {
-    position: 'fixed',
-    left: `${Math.round(left)}px`,
-    top: `${Math.round(top)}px`,
-    width: `${panelW}px`,
-    zIndex: '10050',
-  }
-}
-
-async function toggleEmoji() {
-  emojiOpen.value = !emojiOpen.value
-  if (emojiOpen.value) {
-    await nextTick()
-    placeEmojiPanel()
-  }
-}
-
-function insertEmoji(emoji: string) {
-  editor.value?.chain().focus().insertContent(emoji).run()
-  emojiOpen.value = false
-}
-
-function rememberSelection() {
-  const ed = editor.value
-  if (!ed) return
-  const { from, to } = ed.state.selection
-  savedSelection = { from, to }
-}
-
-function syncColorModels() {
-  const ed = editor.value
-  if (!ed) return
-  const fg = ed.getAttributes('textStyle').color as string | undefined
-  textColor.value = fg?.trim() || '#111827'
-  const bg = ed.getAttributes('highlight').color as string | undefined
-  highlightColor.value = bg?.trim() || '#fef08a'
-  const size = ed.getAttributes('textStyle').fontSize as string | undefined
-  fontSize.value = size?.trim() || ''
-}
-
-function onFontSizeChange(e: Event) {
-  const ed = editor.value
-  if (!ed) return
-  const v = String((e.target as HTMLSelectElement).value || '').trim()
-  fontSize.value = v
-  if (!v) {
-    ed.chain().focus().unsetFontSize().run()
-    return
-  }
-  ed.chain().focus().setFontSize(v).run()
-}
-
-function withSavedSelection(run: (chain: {
-  unsetColor: () => { run: () => boolean }
-  setColor: (c: string) => { run: () => boolean }
-  unsetHighlight: () => { run: () => boolean }
-  setHighlight: (attrs: { color: string }) => { run: () => boolean }
-}) => void) {
-  const ed = editor.value
-  if (!ed) return
-  const chain = ed.chain().focus()
-  if (savedSelection) {
-    chain.setTextSelection(savedSelection)
-  }
-  run(chain as never)
-  savedSelection = {
-    from: ed.state.selection.from,
-    to: ed.state.selection.to,
-  }
-  syncColorModels()
-}
-
-function applyTextColor(v: string) {
-  const color = String(v || '').trim()
-  withSavedSelection((chain) => {
-    if (!color) {
-      chain.unsetColor().run()
-      return
-    }
-    chain.setColor(color).run()
-  })
-}
-
-function applyHighlightColor(v: string) {
-  const color = String(v || '').trim()
-  withSavedSelection((chain) => {
-    if (!color) {
-      chain.unsetHighlight().run()
-      return
-    }
-    chain.setHighlight({ color }).run()
-  })
-}
-
-function insertTable() {
-  editor.value
-    ?.chain()
-    .focus()
-    .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-    .run()
-}
-
-function toggleLink() {
-  const ed = editor.value
-  if (!ed) return
-  const prev = ed.getAttributes('link').href as string | undefined
-  if (ed.isActive('link')) {
-    ed.chain().focus().unsetLink().run()
-    return
-  }
-  const url = window.prompt(crudLabel('linkUrlPrompt'), prev || 'https://')
-  if (url == null) return
-  const href = url.trim()
-  if (!href) {
-    ed.chain().focus().unsetLink().run()
-    return
-  }
-  ed.chain().focus().extendMarkRange('link').setLink({ href, target: '_blank', rel: 'noopener noreferrer' }).run()
-}
-
-function handleMediaPaste(event: ClipboardEvent) {
-  if (!uploadEnabled.value) return false
-  const items = Array.from(event.clipboardData?.items || [])
-  const imageItem = items.find((item) => item.type.startsWith('image/'))
-  if (imageItem) {
-    const file = imageItem.getAsFile()
-    if (!file) return false
-    event.preventDefault()
-    void insertImage(file)
-    return true
-  }
-  const videoItem = items.find((item) => item.type.startsWith('video/'))
-  if (videoItem) {
-    const file = videoItem.getAsFile()
-    if (!file) return false
-    event.preventDefault()
-    void insertVideo(file)
-    return true
-  }
-  return false
-}
-
-function handleMediaDrop(event: DragEvent, moved: boolean) {
-  if (moved || !uploadEnabled.value) return false
-  const files = Array.from(event.dataTransfer?.files || [])
-  const image = files.find((f) => f.type.startsWith('image/'))
-  if (image) {
-    event.preventDefault()
-    void insertImage(image)
-    return true
-  }
-  const video = files.find((f) => f.type.startsWith('video/'))
-  if (video) {
-    event.preventDefault()
-    void insertVideo(video)
-    return true
-  }
-  return false
-}
+const toolbarConfig = computed<Partial<IToolbarConfig>>(() => ({
+  excludeKeys: uploadEnabled.value ? [] : ['uploadImage', 'uploadVideo'],
+}))
 
-const editor = useEditor({
-  content: normalizeHtml(String(props.modelValue || '')),
-  editable: !props.disabled,
-  extensions: [
-    StarterKit.configure({ heading: false }),
-    Underline,
-    TextStyle,
-    Color,
-    FontSize,
-    Highlight.configure({ multicolor: true }),
-    TextAlign.configure({ types: ['paragraph'] }),
-    TaskList,
-    TaskItem.configure({ nested: true }),
-    Link.configure({
-      openOnClick: false,
-      HTMLAttributes: { rel: 'noopener noreferrer', target: '_blank' },
-    }),
-    Image.configure({ allowBase64: false }),
-    VmRichtextVideo,
-    Table.configure({ resizable: true }),
-    TableRow,
-    TableHeader,
-    TableCell,
-    Placeholder.configure({
-      placeholder: props.placeholder ?? crudLabel('richtextPlaceholder'),
-    }),
-  ],
-  editorProps: {
-    attributes: { class: 'vm-richtext__prose' },
-    handlePaste: (_view, event) => handleMediaPaste(event),
-    handleDrop: (_view, event, _slice, moved) => handleMediaDrop(event, moved),
-    handleDOMEvents: {
-      mousedown: (view, event) => onTableMouseDown(view, event),
-      contextmenu: (view, event) => onTableContextMenu(view, event),
+const editorConfig = computed<Partial<IEditorConfig>>(() => ({
+  placeholder: props.placeholder ?? crudLabel('richtextPlaceholder'),
+  MENU_CONF: {
+    uploadImage: {
+      async customUpload(file: File, insertFn: (url: string, alt: string, href: string) => void) {
+        const url = await resolveUpload(file)
+        insertFn(url, file.name || 'image', url)
+      },
+    },
+    uploadVideo: {
+      async customUpload(file: File, insertFn: (url: string, poster: string) => void) {
+        const url = await resolveUpload(file)
+        insertFn(url, '')
+      },
     },
   },
-  onUpdate: ({ editor: ed }) => {
-    if (syncing.value) return
-    emit('update:modelValue', normalizeHtml(ed.getHTML()))
-  },
-  onSelectionUpdate: () => {
-    syncColorModels()
-  },
-  onTransaction: () => {
-    syncColorModels()
-  },
-})
+}))
 
-watch(() => props.modelValue, (next) => {
-  const ed = editor.value
-  if (!ed || readOnlyMode.value) return
-  const html = normalizeHtml(String(next || ''))
-  const current = normalizeHtml(ed.getHTML())
-  if (current === html) return
-  syncing.value = true
-  ed.commands.setContent(html || '<p></p>', false)
-  syncing.value = false
-})
+function handleCreated(editor: IDomEditor) {
+  editorRef.value = editor
+  if (props.disabled) editor.disable()
+  else editor.enable()
+}
 
-watch(() => props.disabled, (v) => {
-  editor.value?.setEditable(!v)
+watch(html, (v) => {
+  if (syncing.value || readOnlyMode.value) return
+  emit('update:modelValue', normalizeHtml(String(v || '')))
 })
 
-function onDocPointer(e: Event) {
-  if (!emojiOpen.value) return
-  const t = e.target as Node
-  if (emojiBtnRef.value?.contains(t)) return
-  if (emojiPanelRef.value?.contains(t)) return
-  emojiOpen.value = false
-}
+watch(
+  () => props.modelValue,
+  (next) => {
+    if (readOnlyMode.value) return
+    const n = normalizeHtml(String(next || ''))
+    const cur = normalizeHtml(String(html.value || ''))
+    if (n === cur) return
+    syncing.value = true
+    html.value = n || '<p><br></p>'
+    syncing.value = false
+  },
+)
 
-function onWinReposition() {
-  if (emojiOpen.value) placeEmojiPanel()
-}
+watch(
+  () => props.disabled,
+  (v) => {
+    const ed = editorRef.value
+    if (!ed) return
+    if (v) ed.disable()
+    else ed.enable()
+  },
+)
 
-onMounted(() => {
-  document.addEventListener('pointerdown', onDocPointer, true)
-  window.addEventListener('resize', onWinReposition)
-  window.addEventListener('scroll', onWinReposition, true)
-})
 onBeforeUnmount(() => {
-  document.removeEventListener('pointerdown', onDocPointer, true)
-  window.removeEventListener('resize', onWinReposition)
-  window.removeEventListener('scroll', onWinReposition, true)
-  editor.value?.destroy()
+  const ed = editorRef.value
+  if (!ed) return
+  ed.destroy()
+  editorRef.value = undefined
 })
 </script>
 
@@ -765,7 +181,6 @@ onBeforeUnmount(() => {
 .vm-richtext {
   width: 100%;
   min-width: 0;
-  box-sizing: border-box;
 }
 
 .vm-richtext.is-disabled {
@@ -776,136 +191,21 @@ onBeforeUnmount(() => {
 .vm-richtext__shell {
   display: flex;
   flex-direction: column;
-  width: 100%;
-  min-width: 0;
-  border: 1px solid var(--input);
-  border-radius: var(--vm-control-radius);
-  background: var(--card);
   overflow: hidden;
-}
-
-.vm-richtext__toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 2px;
-  padding: 6px 8px;
-  border-bottom: 1px solid var(--border);
-  background: var(--muted);
-}
-
-.vm-richtext__btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 28px;
-  height: 28px;
-  padding: 0 6px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--foreground);
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1;
-  cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease;
-
-  i { font-size: 15px; line-height: 1; }
-
-  &:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--brand) 10%, transparent);
-    color: var(--brand);
-  }
-
-  &.is-active {
-    background: color-mix(in srgb, var(--brand) 16%, transparent);
-    color: var(--brand);
-  }
-
-  &:disabled { opacity: 0.35; cursor: not-allowed; }
-}
-
-.vm-richtext__select {
-  height: 28px;
-  min-width: 64px;
-  padding: 0 6px;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius, 8px);
   background: var(--card);
-  color: var(--foreground);
-  font-size: 12px;
-  line-height: 1;
-  cursor: pointer;
-
-  &:disabled { opacity: 0.35; cursor: not-allowed; }
-}
-
-/** 保留原图标 + 底部色条；透明覆盖层承接 vm-color-picker 点击 */
-.vm-richtext__color-btn {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1px;
-  padding: 0 5px 3px;
-
-  &.is-disabled {
-    opacity: 0.35;
-    pointer-events: none;
-  }
-
-  i {
-    position: relative;
-    z-index: 1;
-    pointer-events: none;
-  }
-}
-
-.vm-richtext__color-bar {
-  position: relative;
-  z-index: 1;
-  display: block;
-  width: 14px;
-  height: 3px;
-  border-radius: 1px;
-  pointer-events: none;
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
 }
 
-.vm-richtext__color-hit {
-  position: absolute !important;
-  inset: 0;
-  z-index: 2;
-  width: auto !important;
-  opacity: 0;
-
-  :deep(.vm-color-picker__swatch) {
-    width: 100%;
-    height: 100%;
-    border: none;
-    border-radius: 6px;
-    background: transparent;
-  }
-
-  :deep(.vm-color-picker__swatch-fill) {
-    display: none;
-  }
-}
-
-.vm-richtext__sep {
-  width: 1px;
-  height: 18px;
-  margin: 0 4px;
-  background: var(--border);
+.vm-richtext__toolbar {
+  border-bottom: 1px solid var(--border) !important;
+  background: var(--muted) !important;
 }
 
-.vm-richtext__content {
-  height: var(--vm-richtext-height, 320px) !important;
-  min-height: var(--vm-richtext-height, 320px) !important;
+.vm-richtext__editor {
   flex-shrink: 0;
-  overflow-y: auto;
+  height: var(--vm-richtext-height, 320px) !important;
+  overflow-y: hidden;
   background: var(--card);
 }
 
@@ -918,7 +218,6 @@ onBeforeUnmount(() => {
 
   :deep(p) { margin: 0.5em 0; }
   :deep(strong), :deep(b) { font-weight: 800; }
-  /* Tailwind preflight 会清掉 list-style，只读展示也要补回 */
   :deep(ul) {
     margin: 0.5em 0;
     padding-left: 1.5em;
@@ -936,28 +235,21 @@ onBeforeUnmount(() => {
   :deep(ol ol) { list-style-type: lower-alpha; }
   :deep(ol ol ol) { list-style-type: lower-roman; }
   :deep(li) { display: list-item; }
-  :deep(ul[data-type='taskList']) {
-    list-style: none;
-    padding-left: 0.25em;
-  }
-  :deep(ul[data-type='taskList'] li) {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-  :deep(ul[data-type='taskList'] li > label) {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    margin: 0;
-  }
-  :deep(ul[data-type='taskList'] li > div > p) { margin: 0; }
   :deep(a) { color: var(--brand); text-decoration: underline; }
   :deep(img), :deep(video) { max-width: 100%; height: auto; margin: 8px 0; border-radius: 8px; }
   :deep(table) { width: 100%; border-collapse: collapse; margin: 8px 0; }
   :deep(th), :deep(td) { border: 1px solid var(--border); padding: 6px 8px; }
-  :deep(blockquote) { margin: 0.5em 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted-foreground); }
-  :deep(h1), :deep(h2), :deep(h3), :deep(h4) { margin: 0.65em 0 0.35em; font-weight: 650; line-height: 1.35; }
+  :deep(blockquote) {
+    margin: 0.5em 0;
+    padding-left: 12px;
+    border-left: 3px solid var(--border);
+    color: var(--muted-foreground);
+  }
+  :deep(h1), :deep(h2), :deep(h3), :deep(h4) {
+    margin: 0.65em 0 0.35em;
+    font-weight: 650;
+    line-height: 1.35;
+  }
 }
 
 .vm-richtext.is-readonly .vm-richtext__html {
@@ -965,145 +257,40 @@ onBeforeUnmount(() => {
   border: none;
   background: transparent;
 }
-</style>
 
-<style lang="scss">
-/* Teleport 到 body：Dialog modal 会给 body pointer-events:none，须 vm-dialog-float 恢复 */
-.vm-richtext__emoji-panel {
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: repeat(10, 28px);
-  gap: 2px;
-  width: 314px;
-  max-height: 280px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding: 8px;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  background: var(--card);
-  box-shadow: var(--shadow-soft, 0 8px 24px rgba(0, 0, 0, 0.12));
-  scrollbar-width: thin;
-  pointer-events: auto;
+:deep(.w-e-toolbar) {
+  border: none !important;
+  background: transparent !important;
 }
 
-.vm-richtext__emoji-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  font-size: 18px;
-  line-height: 1;
-  cursor: pointer;
+:deep(.w-e-text-container) {
+  border: none !important;
+  background: var(--card) !important;
+}
 
-  &:hover {
-    background: var(--muted);
-  }
+:deep(.w-e-scroll) {
+  height: var(--vm-richtext-height, 320px) !important;
 }
 
-.vm-richtext__content .tiptap.vm-richtext__prose {
-  min-height: 100%;
-  padding: 12px 14px;
-  outline: none;
+:deep(.w-e-text-container [data-slate-editor]) {
+  min-height: calc(var(--vm-richtext-height, 320px) - 16px) !important;
   color: var(--foreground);
   font-size: 14px;
   line-height: 1.65;
 
-  p { margin: 0.45em 0; }
   strong, b { font-weight: 800; }
+}
+</style>
 
-  p.is-editor-empty:first-child::before {
-    content: attr(data-placeholder);
-    float: left;
-    height: 0;
-    pointer-events: none;
-    color: var(--muted-foreground);
-  }
-
-  h2, h3 { margin: 0.75em 0 0.35em; font-weight: 650; line-height: 1.35; }
-  /* Tailwind / 全局 reset 会 list-style:none，必须显式恢复，否则只见缩进不见符号 */
-  ul {
-    margin: 0.45em 0;
-    padding-left: 1.5em;
-    list-style-type: disc;
-    list-style-position: outside;
-  }
-  ul ul { list-style-type: circle; }
-  ul ul ul { list-style-type: square; }
-  ol {
-    margin: 0.45em 0;
-    padding-left: 1.5em;
-    list-style-type: decimal;
-    list-style-position: outside;
-  }
-  ol ol { list-style-type: lower-alpha; }
-  ol ol ol { list-style-type: lower-roman; }
-  li {
-    display: list-item;
-  }
-  ul[data-type='taskList'] {
-    list-style: none;
-    padding-left: 0.25em;
-  }
-  ul[data-type='taskList'] li {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-  ul[data-type='taskList'] li > label {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    margin: 0;
-  }
-  ul[data-type='taskList'] li > div > p { margin: 0; }
-  blockquote { margin: 0.45em 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted-foreground); }
-  a { color: var(--brand); text-decoration: underline; cursor: pointer; }
-  img, video { display: block; max-width: 100%; height: auto; margin: 8px 0; border-radius: 8px; }
-  mark {
-    border-radius: 2px;
-    padding: 0 2px;
-  }
-  mark:not([style*='background']) {
-    background: color-mix(in srgb, var(--brand) 22%, transparent);
-  }
-  code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--muted); font-size: 0.92em; }
-  pre { margin: 0.5em 0; padding: 10px 12px; border-radius: 8px; background: var(--muted); overflow-x: auto;
-    code { padding: 0; background: transparent; }
-  }
-  table { width: 100%; border-collapse: collapse; margin: 8px 0; table-layout: fixed; }
-  th, td {
-    position: relative;
-    min-width: 48px;
-    padding: 6px 8px;
-    border: 1px solid var(--border);
-    vertical-align: top;
-  }
-  th { background: var(--muted); font-weight: 600; }
-  .selectedCell {
-    background: color-mix(in srgb, var(--brand) 16%, transparent);
-  }
-  .selectedCell::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    background: color-mix(in srgb, var(--brand) 10%, transparent);
-  }
-  .column-resize-handle {
-    position: absolute;
-    top: 0;
-    right: -2px;
-    bottom: 0;
-    width: 4px;
-    background: var(--brand);
-    pointer-events: none;
-  }
-  hr { margin: 12px 0; border: none; border-top: 1px solid var(--border); }
+<style lang="scss">
+/* wangEditor 浮层挂到 body，需高于 Dialog */
+.w-e-bar-item-menus-container,
+.w-e-select-list,
+.w-e-drop-panel,
+.w-e-modal,
+.w-e-panel-content-emotion,
+.w-e-panel-content-color,
+.w-e-panel-content-table {
+  z-index: 10050 !important;
 }
 </style>