@mnykj/alleditor-vue 0.0.0-stage → 1.3.2

package/src/UeHtmlEngine.vue

@@ -0,0 +1,438 @@
+<script setup>
+/**
+ * AllEditor UE HTML 引擎（隐藏原生工具栏，编辑区保真）。
+ * 默认从 /ueditor/ 加载；资源已打进本包，用 @mnykj/alleditor-dual/nuxt 或 /vite 插件挂载即可。
+ *
+ * 注意：
+ * 1) UEditor 会在 ready 前触发空的 contentChange，必须入队、ready 后再灌入。
+ * 2) 不要用 height:100%!important 覆盖 iframeholder。
+ */
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  /** 默认 /ueditor/（包内资源经 nuxt 模块 / vite 插件挂出）；可改为自建 CDN */
+  ueditorBase: { type: String, default: '/ueditor/' },
+  editorId: {
+    type: String,
+    default: () => `alleditor-ue-${Math.random().toString(36).slice(2, 9)}`,
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'created', 'ready', 'change'])
+
+const hostRef = ref(null)
+const instance = ref(null)
+let applying = false
+let destroyed = false
+let ready = false
+let pendingHtml = undefined
+/** @type {ResizeObserver | null} */
+let resizeObserver = null
+
+function normalizeBase(base) {
+  const s = String(base || '/ueditor/').trim() || '/ueditor/'
+  return s.endsWith('/') ? s : `${s}/`
+}
+
+function loadScript(src) {
+  return new Promise((resolve, reject) => {
+    const existed = document.querySelector(`script[src="${src}"]`)
+    if (existed) {
+      if (
+        existed.dataset.loaded === '1' ||
+        (src.includes('ueditor.all') && window.UE)
+      ) {
+        existed.dataset.loaded = '1'
+        resolve()
+        return
+      }
+      existed.addEventListener(
+        'load',
+        () => {
+          existed.dataset.loaded = '1'
+          resolve()
+        },
+        { once: true }
+      )
+      existed.addEventListener('error', () => reject(new Error(`load failed: ${src}`)), {
+        once: true,
+      })
+      return
+    }
+    const el = document.createElement('script')
+    el.src = src
+    el.async = false
+    el.onload = () => {
+      el.dataset.loaded = '1'
+      resolve()
+    }
+    el.onerror = () => reject(new Error(`load failed: ${src}`))
+    document.head.appendChild(el)
+  })
+}
+
+async function ensureUEditor() {
+  if (typeof window === 'undefined') return null
+  const base = normalizeBase(props.ueditorBase)
+  window.UEDITOR_HOME_URL = base
+  if (!window.UE) {
+    await loadScript(`${base}ueditor.config.js`)
+    await loadScript(`${base}ueditor.all.min.js`)
+  }
+  return window.UE
+}
+
+function syncDisabled() {
+  const ue = instance.value
+  if (!ue || !ready) return
+  try {
+    if (props.disabled) ue.setDisabled?.('fullscreen')
+    else ue.setEnabled?.()
+  } catch {
+    /* ignore */
+  }
+}
+
+/**
+ * 清理公众号/Slate 残留：
+ * - <span leaf=""> 包住的 img 易让 UEditor 图片缩放框错位，挡住正文无法编辑
+ * - 去掉无意义的 leaf 属性
+ */
+function sanitizeUeHtml(html) {
+  return String(html ?? '')
+    .replace(/<span\b[^>]*\bleaf(?:\s*=\s*(?:""|''|[^>\s]+))?\s*[^>]*>\s*(<img\b[^>]*>)\s*<\/span>/gi, '$1')
+    .replace(/\sleaf(?:\s*=\s*(?:""|''|"[^"]*"|'[^']*'|[^\s>]+))?/gi, '')
+}
+
+function hideImageScaleUi(ue) {
+  try {
+    const uiRoot = ue?.ui?.getDom?.()
+    if (!uiRoot) return
+    uiRoot.querySelectorAll('.edui-editor-imagescale, [id$="_imagescale"], [id$="_imagescale_cover"]').forEach((el) => {
+      el.style.display = 'none'
+    })
+  } catch {
+    /* ignore */
+  }
+}
+
+function getContent() {
+  const ue = instance.value
+  if (!ue || !ready) {
+    if (pendingHtml !== undefined) return pendingHtml
+    return props.modelValue || ''
+  }
+  try {
+    return ue.getContent() || ''
+  } catch {
+    return props.modelValue || ''
+  }
+}
+
+function setContent(html) {
+  const next = sanitizeUeHtml(html || '')
+  const ue = instance.value
+  if (!ue || !ready) {
+    pendingHtml = next
+    return
+  }
+  applying = true
+  try {
+    ue.setContent(next)
+  } finally {
+    applying = false
+  }
+  hideImageScaleUi(ue)
+  requestAnimationFrame(() => fitEditorHeight(ue))
+}
+
+function focus() {
+  const ue = instance.value
+  if (!ue || !ready) return
+  try {
+    ue.focus?.()
+  } catch {
+    /* ignore */
+  }
+}
+
+function execCommand(cmd, ...args) {
+  const ue = instance.value
+  if (!ue || !ready || props.disabled) return false
+  try {
+    focus()
+    ue.execCommand(cmd, ...args)
+    return true
+  } catch (err) {
+    console.warn('[AllEditor UeHtmlEngine] execCommand', cmd, err)
+    return false
+  }
+}
+
+function queryCommandState(cmd) {
+  const ue = instance.value
+  if (!ue || !ready) return -1
+  try {
+    return ue.queryCommandState(cmd)
+  } catch {
+    return -1
+  }
+}
+
+function fitEditorHeight(ue) {
+  const host = hostRef.value
+  if (!ue || !host) return
+  const h = Math.max(Math.floor(host.clientHeight || 0), 320)
+  try {
+    ue.setHeight?.(h)
+  } catch {
+    /* ignore */
+  }
+  try {
+    const holder = host.querySelector('.edui-editor-iframeholder')
+    const iframe = host.querySelector('iframe')
+    if (holder instanceof HTMLElement) {
+      holder.style.height = `${h}px`
+      holder.style.minHeight = `${h}px`
+    }
+    if (iframe instanceof HTMLElement) {
+      iframe.style.height = `${h}px`
+      iframe.setAttribute('height', String(h))
+    }
+    const editorRoot = host.querySelector('.edui-editor')
+    if (editorRoot instanceof HTMLElement) {
+      editorRoot.style.height = `${h}px`
+    }
+  } catch {
+    /* ignore */
+  }
+}
+
+function bindResize(ue) {
+  unbindResize()
+  const host = hostRef.value
+  if (!host || typeof ResizeObserver === 'undefined') return
+  resizeObserver = new ResizeObserver(() => {
+    if (destroyed || !ready) return
+    fitEditorHeight(ue)
+  })
+  resizeObserver.observe(host)
+}
+
+function unbindResize() {
+  if (resizeObserver) {
+    try {
+      resizeObserver.disconnect()
+    } catch {
+      /* ignore */
+    }
+    resizeObserver = null
+  }
+}
+
+function injectReadableBodyStyle(ue) {
+  try {
+    const doc = ue?.document
+    if (!doc?.head) return
+    if (doc.getElementById('alleditor-ue-readable')) return
+    const style = doc.createElement('style')
+    style.id = 'alleditor-ue-readable'
+    style.textContent = [
+      'html,body{height:auto!important;min-height:100%;}',
+      'body{color:#333;background:#fff;margin:12px 16px;font-size:15px;line-height:1.75;}',
+      'body.view{overflow-y:auto!important;}',
+      'img{max-width:100%;height:auto;}',
+    ].join('')
+    doc.head.appendChild(style)
+  } catch {
+    /* ignore */
+  }
+}
+
+function destroyEditor() {
+  unbindResize()
+  const UE = typeof window !== 'undefined' ? window.UE : null
+  const id = props.editorId
+  if (UE && id) {
+    try {
+      UE.delEditor?.(id)
+    } catch {
+      /* ignore */
+    }
+  }
+  instance.value = null
+  ready = false
+  pendingHtml = undefined
+  if (hostRef.value) hostRef.value.innerHTML = ''
+}
+
+onMounted(async () => {
+  destroyed = false
+  pendingHtml = props.modelValue || ''
+  try {
+    const UE = await ensureUEditor()
+    if (!UE || destroyed || !hostRef.value) return
+
+    const holder = document.createElement('div')
+    holder.id = props.editorId
+    hostRef.value.innerHTML = ''
+    hostRef.value.appendChild(holder)
+
+    const height = Math.max(Math.floor(hostRef.value.clientHeight || 0), 480)
+    const ue = UE.getEditor(props.editorId, {
+      toolbars: [[]],
+      initialFrameHeight: height,
+      initialFrameWidth: '100%',
+      autoHeightEnabled: false,
+      // 关闭图片八爪缩放框：编辑区在 iframe 内时缩放层常错位/关不掉，正文点不动
+      imageScaleEnabled: false,
+      imagePopup: false,
+      scaleEnabled: false,
+      serverUrl: '',
+      enableAutoSave: false,
+      elementPathEnabled: false,
+      wordCount: false,
+      enableContextMenu: true,
+      retainOnlyLabelPasted: false,
+      pasteplain: false,
+    })
+
+    instance.value = ue
+    emit('created', ue)
+
+    ue.addListener('contentChange', () => {
+      if (applying || destroyed || !ready) return
+      const html = getContent()
+      emit('update:modelValue', html)
+      emit('change', html)
+    })
+    // 即便外部配置被覆盖，缩放层弹出时立刻隐藏，避免挡住编辑
+    ue.addListener('afterscaleshow', () => hideImageScaleUi(ue))
+
+    ue.ready(() => {
+      if (destroyed) return
+      ready = true
+      const initial = sanitizeUeHtml(
+        pendingHtml !== undefined ? pendingHtml : props.modelValue || ''
+      )
+      pendingHtml = undefined
+      applying = true
+      try {
+        ue.setContent(initial)
+      } finally {
+        applying = false
+      }
+      injectReadableBodyStyle(ue)
+      hideImageScaleUi(ue)
+      fitEditorHeight(ue)
+      bindResize(ue)
+      requestAnimationFrame(() => fitEditorHeight(ue))
+      setTimeout(() => fitEditorHeight(ue), 50)
+      setTimeout(() => fitEditorHeight(ue), 200)
+      syncDisabled()
+      emit('ready', ue)
+    })
+  } catch (err) {
+    console.error('[AllEditor UeHtmlEngine]', err)
+  }
+})
+
+watch(
+  () => props.modelValue,
+  (html) => {
+    if (destroyed) return
+    const next = sanitizeUeHtml(html || '')
+    if (!ready || applying) {
+      pendingHtml = next
+      return
+    }
+    try {
+      const live = sanitizeUeHtml(getContent() || '')
+      if (live === next) return
+      setContent(next)
+    } catch {
+      /* ignore */
+    }
+  }
+)
+
+watch(
+  () => props.disabled,
+  () => syncDisabled()
+)
+
+onBeforeUnmount(() => {
+  destroyed = true
+  destroyEditor()
+})
+
+defineExpose({
+  getContent,
+  setContent,
+  execCommand,
+  queryCommandState,
+  focus,
+  getEditor: () => instance.value,
+  isReady: () => ready,
+})
+</script>
+
+<template>
+  <div ref="hostRef" class="alleditor-ue-engine" />
+</template>
+
+<style scoped>
+.alleditor-ue-engine {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  flex: 1 1 0;
+  display: block;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+}
+
+.alleditor-ue-engine :deep(.edui-editor-toolbarbox),
+.alleditor-ue-engine :deep(.edui-editor-toolbarboxouter),
+.alleditor-ue-engine :deep(.edui-editor-toolbarboxinner),
+.alleditor-ue-engine :deep(.edui-editor-bottomContainer),
+.alleditor-ue-engine :deep(.edui-editor-messageholder) {
+  display: none !important;
+  height: 0 !important;
+  overflow: hidden !important;
+  border: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.alleditor-ue-engine :deep(.edui-default),
+.alleditor-ue-engine :deep(.edui-editor) {
+  width: 100% !important;
+  border: none !important;
+  box-shadow: none !important;
+  background: #fff !important;
+}
+
+.alleditor-ue-engine :deep(.edui-editor-iframeholder) {
+  width: 100% !important;
+  border: none !important;
+}
+
+.alleditor-ue-engine :deep(.edui-editor-iframeholder iframe) {
+  width: 100% !important;
+  display: block !important;
+  border: none !important;
+  background: #fff !important;
+}
+
+/* 兜底隐藏图片缩放框（错位时会盖住正文） */
+.alleditor-ue-engine :deep(.edui-editor-imagescale),
+.alleditor-ue-engine :deep([id$='_imagescale']),
+.alleditor-ue-engine :deep([id$='_imagescale_cover']) {
+  display: none !important;
+  pointer-events: none !important;
+}
+</style>

package/src/assets/iconfont/iconfont.css

@@ -0,0 +1,27 @@
+/* iconfont 项目 5252173（markdown / HTML / 清空文档）；字体已随包备份 */
+@font-face {
+  font-family: 'iconfont';
+  src: url('./iconfont.woff2') format('woff2'),
+       url('./iconfont.woff') format('woff'),
+       url('./iconfont.ttf') format('truetype');
+}
+
+.iconfont {
+  font-family: 'iconfont' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-html:before {
+  content: '\e648';
+}
+
+.icon-markdown-line:before {
+  content: '\e8d4';
+}
+
+.icon-qingkongwendang1:before {
+  content: '\e601';
+}

package/src/defaultToolbar.ts

@@ -0,0 +1,115 @@
+/**
+ * DualEditor 默认工具栏：AllEditor 标准项 + MD/HTML 导入。
+ * 宿主传入 toolbarConfig.toolbarKeys 时可完全覆盖。
+ */
+export const DEFAULT_DUAL_TOOLBAR_KEYS: Array<string | Record<string, any>> = [
+  'headerSelect',
+  'blockquote',
+  '|',
+  'bold',
+  'underline',
+  'italic',
+  {
+    key: 'group-more-style',
+    title: '更多',
+    iconSvg:
+      '<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',
+    menuKeys: ['through', 'code', 'sup', 'sub', 'clearStyle'],
+  },
+  'color',
+  'bgColor',
+  '|',
+  'fontSize',
+  'fontFamily',
+  'lineHeight',
+  '|',
+  'bulletedList',
+  'numberedList',
+  'todo',
+  {
+    key: 'group-justify',
+    title: '对齐',
+    iconSvg:
+      '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
+    menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify'],
+  },
+  {
+    key: 'group-indent',
+    title: '缩进',
+    iconSvg:
+      '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
+    menuKeys: ['indent', 'delIndent'],
+  },
+  '|',
+  'emotion',
+  'insertLink',
+  {
+    key: 'group-image',
+    title: '图片',
+    iconSvg:
+      '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>',
+    menuKeys: ['insertImage', 'uploadImage'],
+  },
+  {
+    key: 'group-video',
+    title: '视频',
+    iconSvg:
+      '<svg viewBox="0 0 1024 1024"><path d="M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z"></path></svg>',
+    menuKeys: ['insertVideo', 'uploadVideo'],
+  },
+  'insertTable',
+  'codeBlock',
+  'divider',
+  '|',
+  'undo',
+  'redo',
+  '|',
+  'importMarkdown',
+  'sourceCode',
+  '|',
+  'clearContent',
+  'fullScreen',
+]
+
+function ensureKeyBefore(
+  keys: Array<string | Record<string, any>>,
+  key: string,
+  beforeKey: string
+) {
+  const has = keys.some((k: any) => k === key || k?.key === key)
+  if (has) return keys
+  const idx = keys.findIndex((k: any) => k === beforeKey || k?.key === beforeKey)
+  const next = [...keys]
+  if (idx >= 0) next.splice(idx, 0, key)
+  else next.push(key)
+  return next
+}
+
+export function mergeToolbarConfig(
+  userConfig: Record<string, any> | null | undefined,
+  options?: { enableImport?: boolean }
+) {
+  const enableImport = options?.enableImport !== false
+  const user = userConfig && typeof userConfig === 'object' ? { ...userConfig } : {}
+  if (Array.isArray(user.toolbarKeys) && user.toolbarKeys.length) {
+    let keys = [...user.toolbarKeys]
+    if (enableImport) {
+      const hasMd = keys.some(
+        (k: any) => k === 'importMarkdown' || k?.key === 'importMarkdown'
+      )
+      const hasHtml = keys.some(
+        (k: any) => k === 'sourceCode' || k?.key === 'sourceCode'
+      )
+      if (!hasMd) keys.push('importMarkdown')
+      if (!hasHtml) keys.push('sourceCode')
+    }
+    keys = ensureKeyBefore(keys, 'clearContent', 'fullScreen')
+    return { ...user, toolbarKeys: keys }
+  }
+  const keys = enableImport
+    ? DEFAULT_DUAL_TOOLBAR_KEYS
+    : DEFAULT_DUAL_TOOLBAR_KEYS.filter(
+        (k) => k !== 'importMarkdown' && k !== 'sourceCode'
+      )
+  return { ...user, toolbarKeys: keys }
+}