@mnykj/alleditor-vue 0.0.0-stage → 1.3.2

package/src/importMenus.ts

@@ -0,0 +1,158 @@
+import { Boot } from '@mnykj/alleditor-core'
+
+/** iconfont 项目 5252173；clearSvgStyle 会去掉 class，故用 unicode + font-family */
+const ICONFONT_STYLE =
+  'font-family:iconfont!important;font-size:16px;font-style:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale'
+
+function iconfontGlyph(char: string) {
+  return `<i style="${ICONFONT_STYLE}" aria-hidden="true">${char}</i>`
+}
+
+/**
+ * 工具栏「导入 HTML」：导入 .html。
+ * 图标：iconfont「html」\ue648。
+ */
+export class SourceCodeMenu {
+  title = '导入 HTML'
+  tag = 'button'
+  iconSvg = iconfontGlyph('\ue648')
+
+  getValue() {
+    return ''
+  }
+  isActive() {
+    return !!(SourceCodeMenu.attrs as { active?: boolean }).active
+  }
+  isDisabled() {
+    return false
+  }
+  exec() {
+    const handler = SourceCodeMenu.attrs.onImport
+    if (typeof handler === 'function') handler()
+  }
+
+  static attrs: {
+    active: boolean
+    onImport: null | (() => void)
+    onToggle: null | (() => void)
+  } = {
+    active: false,
+    onImport: null,
+    onToggle: null,
+  }
+}
+
+/**
+ * 工具栏：导入 Markdown 文件（仅 .md）。
+ * 图标：iconfont「markdown-line」\ue8d4。
+ */
+export class ImportMarkdownMenu {
+  title = '导入 Markdown'
+  tag = 'button'
+  iconSvg = iconfontGlyph('\ue8d4')
+
+  getValue() {
+    return ''
+  }
+  isActive() {
+    return false
+  }
+  isDisabled() {
+    return false
+  }
+  exec() {
+    const handler = ImportMarkdownMenu.attrs.onImport
+    if (typeof handler === 'function') handler()
+  }
+
+  static attrs: {
+    onImport: null | (() => void)
+  } = {
+    onImport: null,
+  }
+}
+
+/**
+ * 工具栏「清空文档」：确认后清空正文（始终可点，对齐全屏）。
+ * 图标：iconfont「qingkongwendang1」\ue601。
+ */
+export class ClearContentMenu {
+  title = '清空文档'
+  tag = 'button'
+  alwaysEnable = true
+  iconSvg = iconfontGlyph('\ue601')
+
+  getValue() {
+    return ''
+  }
+  isActive() {
+    return false
+  }
+  isDisabled() {
+    return false
+  }
+  exec() {
+    const handler = ClearContentMenu.attrs.onClear
+    if (typeof handler === 'function') handler()
+  }
+
+  static attrs: {
+    onClear: null | (() => void)
+  } = {
+    onClear: null,
+  }
+}
+
+/** 注册导入 / 清空菜单（幂等；HMR 安全，逐项 try 避免漏注册） */
+export function registerImportMenus() {
+  try {
+    Boot.registerMenu({
+      key: 'sourceCode',
+      factory() {
+        return new SourceCodeMenu()
+      },
+    })
+  } catch {
+    /* 重复注册忽略 */
+  }
+  try {
+    Boot.registerMenu({
+      key: 'importMarkdown',
+      factory() {
+        return new ImportMarkdownMenu()
+      },
+    })
+  } catch {
+    /* 重复注册忽略 */
+  }
+  try {
+    Boot.registerMenu({
+      key: 'clearContent',
+      factory() {
+        return new ClearContentMenu()
+      },
+    })
+  } catch {
+    /* 重复注册忽略 */
+  }
+}
+
+export function bindImportMenuHandlers(handlers: {
+  onImportHtml?: null | (() => void)
+  onImportMarkdown?: null | (() => void)
+  onToggleSource?: null | (() => void)
+  onClearContent?: null | (() => void)
+}) {
+  if (handlers.onImportHtml !== undefined) {
+    SourceCodeMenu.attrs.onImport = handlers.onImportHtml
+  }
+  if (handlers.onToggleSource !== undefined) {
+    SourceCodeMenu.attrs.onToggle = handlers.onToggleSource
+  }
+  if (handlers.onImportMarkdown !== undefined) {
+    ImportMarkdownMenu.attrs.onImport = handlers.onImportMarkdown
+  }
+  if (handlers.onClearContent !== undefined) {
+    ClearContentMenu.attrs.onClear = handlers.onClearContent
+  }
+}

package/src/index.ts

@@ -0,0 +1,58 @@
+/**
+ * @mnykj/alleditor-vue
+ * 桌面 Web 壳：AllEditor（wang + UE）与工具栏适配。
+ * 引擎协议见 @mnykj/alleditor-core（与本包同版本锁步）。
+ */
+
+export { default as AllEditor } from './AllEditor.vue'
+/** @deprecated 使用 AllEditor */
+export { default as DualEditor } from './AllEditor.vue'
+export { default as UeHtmlEngine } from './UeHtmlEngine.vue'
+
+export {
+  WANG_MENU_TO_UE,
+  routeWangMenuKeyToUe,
+  bindUeToolbarAdapter,
+  isUeRoutableMenuKey,
+  getUeToolbarEnableKeys,
+} from './ueToolbar'
+export type { UeCommandRunner, BindUeToolbarOptions, UeToolbarBinding } from './ueToolbar'
+
+export { DEFAULT_UEDITOR_PUBLIC_BASE } from './ueditorBase'
+
+export {
+  SourceCodeMenu,
+  ImportMarkdownMenu,
+  ClearContentMenu,
+  registerImportMenus,
+  bindImportMenuHandlers,
+} from './importMenus'
+export {
+  DEFAULT_DUAL_TOOLBAR_KEYS,
+  DEFAULT_DUAL_TOOLBAR_KEYS as DEFAULT_ALLEDITOR_TOOLBAR_KEYS,
+  mergeToolbarConfig,
+} from './defaultToolbar'
+export {
+  markdownToHtml,
+  extractHtmlBody,
+  isEffectivelyEmptyHtml,
+} from './markdown'
+export { stripJavascriptFromHtml } from './stripJavascriptFromHtml'
+
+// 协议工具从引擎包再导出，方便只装 vue 壳的调用方
+export type { AllEditorEngine } from '@mnykj/alleditor-core'
+export {
+  ALLEDITOR_ENGINE_ATTR,
+  ALLEDITOR_ENGINE_CLASS,
+  isHeavyFidelityHtml,
+  stripLegacyEngineComments,
+  parseEditorEngineRoot,
+  unwrapEditorEngineHtml,
+  detectEditorEngine,
+  wrapEditorEngineHtml,
+  ensureEditorEngineHtml,
+  migrateLegacyEngineMarkers,
+} from '@mnykj/alleditor-core'
+
+// 底层 wang 组件，便于单包安装
+export { Editor, Toolbar } from '@mnykj/alleditor-for-vue'

package/src/markdown.ts

@@ -0,0 +1,46 @@
+/** @type {import('markdown-it') | null} */
+let markdownItInstance: any = null
+
+export async function markdownToHtml(text: string): Promise<string> {
+  if (!markdownItInstance) {
+    const mod = await import('markdown-it')
+    const MarkdownIt = mod.default || mod
+    markdownItInstance = new MarkdownIt({
+      html: false,
+      linkify: true,
+      breaks: true,
+    })
+  }
+  let html = markdownItInstance.render(text || '')
+  if (!String(html).trim()) html = '<p><br></p>'
+  return html
+}
+
+/** 从完整 HTML 文档取出 body 内片段 */
+export function extractHtmlBody(text: string): string {
+  let s = String(text || '').replace(/^\uFEFF/, '')
+  const bodyMatch = s.match(/<body[^>]*>([\s\S]*?)<\/body>/i)
+  if (bodyMatch) s = bodyMatch[1]
+  return s.trim()
+}
+
+export function isEffectivelyEmptyHtml(html: string): boolean {
+  const s = String(html ?? '').trim()
+  if (!s) return true
+  if (
+    /<(img|video|audio|iframe|embed|object|source|hr|table|svg|blockquote|pre|ul|ol|h[1-6])\b/i.test(
+      s
+    )
+  ) {
+    return false
+  }
+  const text = s
+    .replace(/<!--[\s\S]*?-->/g, '')
+    .replace(/&nbsp;/gi, ' ')
+    .replace(/<br\s*\/?>/gi, '')
+    .replace(/<p>\s*<\/p>/gi, '')
+    .replace(/<div[^>]*>\s*<\/div>/gi, '')
+    .replace(/<[^>]+>/g, '')
+    .trim()
+  return text === ''
+}

package/src/stripJavascriptFromHtml.ts

@@ -0,0 +1,28 @@
+/**
+ * 导入 HTML 时剥离 JS：script、事件属性、javascript: 伪协议。
+ */
+export function stripJavascriptFromHtml(html: string): string {
+  let s = String(html ?? '')
+
+  const open = '<' + 'script'
+  const close = '<' + '/' + 'script>'
+  const blockRe = new RegExp(`${open}\\b[^>]*>[\\s\\S]*?${close}`, 'gi')
+  const selfRe = new RegExp(`${open}\\b[^>]*\\/?>`, 'gi')
+
+  s = s.replace(blockRe, '')
+  s = s.replace(selfRe, '')
+
+  s = s.replace(/\s+on[a-zA-Z]+\s*=\s*(['"])[\s\S]*?\1/g, '')
+  s = s.replace(/\s+on[a-zA-Z]+\s*=\s*[^\s>]+/g, '')
+
+  s = s.replace(
+    /\s(href|src|action|formaction|xlink:href)\s*=\s*(['"])\s*javascript:[\s\S]*?\2/gi,
+    ' $1=$2#$2'
+  )
+  s = s.replace(
+    /\s(href|src|action|formaction|xlink:href)\s*=\s*(['"])?\s*javascript:[^\s>]*/gi,
+    ' $1="#"'
+  )
+
+  return s
+}

package/src/ueToolbar.ts

@@ -0,0 +1,257 @@
+/**
+ * 将 wang 工具栏菜单转发到 UE HTML 引擎。
+ * UE 模式下：可映射按钮强制去 disabled 灰态，点击走 UE；不可映射项保持灰显。
+ */
+
+export type UeCommandRunner = {
+  execCommand?: (cmd: string, ...args: any[]) => any
+  focus?: () => void
+  getEditor?: () => { focus?: () => void } | null
+}
+
+/** wang menu key → UE execCommand（含工具栏实际 key 别名） */
+export const WANG_MENU_TO_UE: Record<string, string> = {
+  bold: 'bold',
+  italic: 'italic',
+  underline: 'underline',
+  through: 'strikethrough',
+  code: 'code',
+  sub: 'subscript',
+  sup: 'superscript',
+  undo: 'undo',
+  redo: 'redo',
+  bulletedList: 'insertunorderedlist',
+  numberedList: 'insertorderedlist',
+  justifyLeft: 'justifyleft',
+  justifyCenter: 'justifycenter',
+  justifyRight: 'justifyright',
+  justifyJustify: 'justifyjustify',
+  indent: 'indent',
+  delIndent: 'outdent',
+  clearStyle: 'removeformat',
+  clearAllFormat: 'removeformat',
+  divider: 'horizontal',
+  dividerAtCursor: 'horizontal',
+  emotion: 'emotion',
+  insertTable: 'inserttable',
+  blockquote: 'blockquote',
+  blockquoteMerged: 'blockquote',
+  codeBlock: 'insertcode',
+}
+
+/** 仍走 wang Boot / 宿主回调，不转发 UE */
+const DEFAULT_PASSTHROUGH_KEYS = new Set([
+  'sourceCode',
+  'importMarkdown',
+  'clearContent',
+  'fullScreen',
+])
+
+/** group 面板本身不拦截，让子菜单展开；子项再按映射转发 */
+function isGroupMenuKey(key: string) {
+  return key.startsWith('group-')
+}
+
+export function isUeRoutableMenuKey(
+  key: string,
+  passthroughKeys?: Set<string>
+): boolean {
+  if (!key || isGroupMenuKey(key)) return false
+  const pass = passthroughKeys || DEFAULT_PASSTHROUGH_KEYS
+  if (pass.has(key)) return false
+  if (key === 'insertLink') return true
+  if (key === 'insertTable' || key === 'inserttable') return true
+  if (key === 'uploadImage' || key === 'insertImage') return false
+  if (key === 'uploadVideo' || key === 'insertVideo') return false
+  return !!WANG_MENU_TO_UE[key]
+}
+
+/** UE 模式下应保持可点的按钮（视觉上去掉 disabled） */
+export function getUeToolbarEnableKeys(
+  passthroughKeys?: Set<string>
+): Set<string> {
+  const pass = passthroughKeys || DEFAULT_PASSTHROUGH_KEYS
+  return new Set([
+    ...Object.keys(WANG_MENU_TO_UE),
+    'insertLink',
+    'insertTable',
+    ...pass,
+  ])
+}
+
+function focusUe(ue: UeCommandRunner | null | undefined) {
+  if (!ue) return
+  try {
+    if (typeof ue.focus === 'function') {
+      ue.focus()
+      return
+    }
+    ue.getEditor?.()?.focus?.()
+  } catch {
+    /* ignore */
+  }
+}
+
+export function routeWangMenuKeyToUe(
+  key: string,
+  ue: UeCommandRunner | null | undefined
+) {
+  if (!key || !ue?.execCommand) return
+  focusUe(ue)
+  if (key === 'insertLink') {
+    const href =
+      typeof window !== 'undefined'
+        ? window.prompt('请输入链接地址：', 'https://')
+        : ''
+    if (!href) return
+    ue.execCommand('link', { href })
+    return
+  }
+  if (key === 'insertTable' || key === 'inserttable') {
+    ue.execCommand('inserttable', { numRows: 3, numCols: 3 })
+    return
+  }
+  if (key === 'uploadImage' || key === 'insertImage') return
+  if (key === 'uploadVideo' || key === 'insertVideo') return
+  const cmd = WANG_MENU_TO_UE[key]
+  if (cmd) ue.execCommand(cmd)
+}
+
+export type BindUeToolbarOptions = {
+  /** 工具栏根节点，或 CSS 选择器 */
+  toolbar: Element | string
+  getUe: () => UeCommandRunner | null | undefined
+  /** 返回 false 时不拦截、也不强制启用（例如当前不是 UE 模式） */
+  shouldCapture?: () => boolean
+  passthroughKeys?: Set<string>
+}
+
+export type UeToolbarBinding = {
+  unbind: () => void
+  /** 立刻按 UE 模式同步一次按钮可用态 */
+  syncEnabled: () => void
+}
+
+export function bindUeToolbarAdapter(
+  options: BindUeToolbarOptions
+): UeToolbarBinding {
+  const passthrough = options.passthroughKeys || DEFAULT_PASSTHROUGH_KEYS
+  const enableKeys = getUeToolbarEnableKeys(passthrough)
+
+  const resolveBar = () => {
+    if (typeof options.toolbar === 'string') {
+      return typeof document !== 'undefined'
+        ? document.querySelector(options.toolbar)
+        : null
+    }
+    return options.toolbar
+  }
+
+  const shouldCapture = () =>
+    !options.shouldCapture || !!options.shouldCapture()
+
+  const syncEnabled = () => {
+    const bar = resolveBar()
+    if (!bar) return
+    if (!shouldCapture()) return
+    bar.querySelectorAll('button[data-menu-key]').forEach((node) => {
+      const btn = node as HTMLElement
+      const key = btn.getAttribute('data-menu-key') || ''
+      if (!key || isGroupMenuKey(key)) return
+      if (enableKeys.has(key)) {
+        btn.classList.remove('disabled')
+        btn.removeAttribute('disabled')
+        btn.removeAttribute('aria-disabled')
+      }
+    })
+  }
+
+  // bold 等是 toggle：pointerdown + click 各 exec 一次会「闪一下又还原」
+  let lastRouteAt = 0
+  let lastRouteKey = ''
+
+  const onCapture = (e: Event) => {
+    if (!shouldCapture()) return
+    const t = e.target as HTMLElement | null
+    const btn = t?.closest?.(
+      'button[data-menu-key], .w-e-bar-item button'
+    ) as HTMLElement | null
+    if (!btn) return
+    const key =
+      btn.getAttribute?.('data-menu-key') ||
+      btn.closest?.('[data-menu-key]')?.getAttribute?.('data-menu-key')
+    if (!key || !isUeRoutableMenuKey(key, passthrough)) return
+    // 即使仍带 disabled class，也拦截（wang BaseButton 内部 disabled 挡不住 capture）
+    e.preventDefault()
+    e.stopPropagation()
+    if (typeof (e as any).stopImmediatePropagation === 'function') {
+      ;(e as any).stopImmediatePropagation()
+    }
+    // click 只吞掉，不 exec：bold 等是 toggle，mousedown+click 各一次会抵消
+    if (e.type !== 'mousedown') return
+    const now = Date.now()
+    if (key === lastRouteKey && now - lastRouteAt < 320) return
+    lastRouteKey = key
+    lastRouteAt = now
+    routeWangMenuKeyToUe(key, options.getUe())
+  }
+
+  let bar = resolveBar()
+  let bound = false
+  /** @type {MutationObserver | null} */
+  let classObserver: MutationObserver | null = null
+  let syncTimer: ReturnType<typeof setTimeout> | null = null
+
+  const scheduleSync = () => {
+    if (syncTimer) clearTimeout(syncTimer)
+    // 晚于 wang Toolbar changeToolbarState 的 200ms debounce
+    syncTimer = setTimeout(() => {
+      syncTimer = null
+      syncEnabled()
+    }, 220)
+  }
+
+  const attach = (el: Element) => {
+    // 仅 mousedown 执行命令（保选区）；click 只拦截，避免与 wang / pointer 二次触发把 toggle 命令抵消
+    el.addEventListener('mousedown', onCapture, true)
+    el.addEventListener('click', onCapture, true)
+    classObserver = new MutationObserver(() => {
+      if (!shouldCapture()) return
+      scheduleSync()
+    })
+    classObserver.observe(el, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+    bound = true
+    syncEnabled()
+    scheduleSync()
+  }
+
+  if (bar) {
+    attach(bar)
+  } else if (typeof requestAnimationFrame !== 'undefined') {
+    requestAnimationFrame(() => {
+      bar = resolveBar()
+      if (bar && !bound) attach(bar)
+    })
+  }
+
+  return {
+    syncEnabled,
+    unbind() {
+      if (syncTimer) {
+        clearTimeout(syncTimer)
+        syncTimer = null
+      }
+      classObserver?.disconnect()
+      classObserver = null
+      const el = bar || resolveBar()
+      if (!el || !bound) return
+      el.removeEventListener('mousedown', onCapture, true)
+      el.removeEventListener('click', onCapture, true)
+      bound = false
+    },
+  }
+}

package/src/ueditorBase.ts

@@ -0,0 +1,2 @@
+/** 浏览器默认挂载路径（包内资源经 nuxt 模块 / vite 插件挂到此处） */
+export const DEFAULT_UEDITOR_PUBLIC_BASE = '/ueditor/'

package/src/ueditorPaths.ts

@@ -0,0 +1,11 @@
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { DEFAULT_UEDITOR_PUBLIC_BASE } from './ueditorBase'
+
+export { DEFAULT_UEDITOR_PUBLIC_BASE }
+
+/** 包内 ueditor 静态目录的绝对路径（仅 Node / 构建配置用，勿在浏览器组件里 import） */
+export function getUeditorPackageDir(): string {
+  const here = dirname(fileURLToPath(import.meta.url))
+  return join(here, '..', 'ueditor')
+}

package/ueditor/dialogs/anchor/anchor.html

@@ -0,0 +1,40 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+    "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <title></title>
+        <style type="text/css">
+            *{color: #838383;margin: 0;padding: 0}
+            html,body {font-size: 12px;overflow: hidden; }
+            .content{padding:5px 0 0 15px;}
+            input{width:210px;height:21px;line-height:21px;margin-left: 4px;}
+        </style>
+    </head>
+    <body>
+        <div class="content">
+            <span><var id="lang_input_anchorName"></var></span><input id="anchorName"  value="" />
+        </div>
+        <script type="text/javascript" src="../internal.js"></script>
+        <script type="text/javascript">
+            var anchorInput = $G('anchorName'),
+                node = editor.selection.getRange().getClosedNode();
+            if(node && node.tagName == 'IMG' && (node = node.getAttribute('anchorname'))){
+                anchorInput.value = node;
+            }
+            anchorInput.onkeydown = function(evt){
+                evt = evt || window.event;
+                if(evt.keyCode == 13){
+                    editor.execCommand('anchor', anchorInput.value);
+                    dialog.close();
+                    domUtils.preventDefault(evt)
+                }
+            };
+            dialog.onok = function (){
+                editor.execCommand('anchor', anchorInput.value);
+                dialog.close();
+            };
+            $focus(anchorInput);
+        </script>
+    </body>
+</html>