@mnykj/alleditor-dual 1.1.2 → 1.2.0

package/README.md

@@ -49,6 +49,27 @@ const html = ref('<p>hello</p>')
 </template>
 ```
 
+默认工具栏已带 **导入 Markdown**、**导入 HTML**：
+- `.md` → wang 引擎
+- `.html` → ue 引擎（并剥离 script / 事件属性）
+
+不需要时：`<DualEditor :enable-import="false" />`。自定义 `toolbarConfig.toolbarKeys` 时，若未包含这两项会自动补上（`enableImport` 为 true）。
+
+仅注册菜单、自己接文件选择（如创作中心）：
+
+```ts
+import {
+  registerImportMenus,
+  bindImportMenuHandlers,
+} from '@mnykj/alleditor-dual'
+
+registerImportMenus()
+bindImportMenuHandlers({
+  onImportHtml: () => htmlInput.click(),
+  onImportMarkdown: () => mdInput.click(),
+})
+```
+
 一般不用再写 `ueditor-base`。若自建 CDN，可覆盖：
 
 ```vue

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mnykj/alleditor-dual",
-  "version": "1.1.2",
-  "description": "AllEditor dual-engine (wang + UE HTML) Vue3 components, with bundled UEditor static assets",
+  "version": "1.2.0",
+  "description": "AllEditor dual-engine (wang + UE HTML) Vue3 components, with bundled UEditor static assets and MD/HTML import menus",
   "author": "mnykj",
   "license": "MIT",
   "type": "module",
@@ -36,12 +36,15 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "dependencies": {
+    "markdown-it": "^14.3.3"
+  },
   "peerDependencies": {
     "@mnykj/alleditor": "^1.1.1",
     "@mnykj/alleditor-for-vue": "^1.1.0",
-    "vue": "^3.0.5",
+    "@nuxt/kit": ">=3",
     "vite": ">=4",
-    "@nuxt/kit": ">=3"
+    "vue": "^3.0.5"
   },
   "peerDependenciesMeta": {
     "vite": {

package/src/DualEditor.vue

@@ -2,13 +2,15 @@
 /**
  * AllEditor 双引擎门面：按 HTML 协议自动选 wang / ue，共用 wang 工具栏。
  *
- * v-model 存「可入库」HTML（UE 模式会包 data-alleditor-engine 根节点）。
+ * v-model 存「可入库」HTML（默认 wang/ue 都包 data-alleditor-engine 根节点）。
+ * 内置 MD / HTML 导入菜单（默认工具栏可见）。
  * 宿主需自行提供 UEditor 静态资源（默认 /ueditor/）。
  */
 import {
   computed,
   nextTick,
   onBeforeUnmount,
+  onMounted,
   ref,
   shallowRef,
   watch,
@@ -21,6 +23,17 @@ import {
 } from '@mnykj/alleditor'
 import UeHtmlEngine from './UeHtmlEngine.vue'
 import { bindUeToolbarAdapter } from './ueToolbar'
+import {
+  bindImportMenuHandlers,
+  registerImportMenus,
+} from './importMenus'
+import { mergeToolbarConfig } from './defaultToolbar'
+import {
+  extractHtmlBody,
+  isEffectivelyEmptyHtml,
+  markdownToHtml,
+} from './markdown'
+import { stripJavascriptFromHtml } from './stripJavascriptFromHtml'
 
 const props = defineProps({
   modelValue: { type: String, default: '' },
@@ -33,6 +46,10 @@ const props = defineProps({
   wangPlaceholder: { type: String, default: '<p><br></p>' },
   /** 为 true 时仅 ue 写外层 div；默认 false，wang/ue 都包 data-alleditor-engine */
   wrapOnlyWhenUe: { type: Boolean, default: false },
+  /** 是否注册并显示 MD/HTML 导入按钮（默认开启） */
+  enableImport: { type: Boolean, default: true },
+  /** 正文非空时导入是否 confirm 确认替换 */
+  confirmReplaceOnImport: { type: Boolean, default: true },
   toolbarSelector: {
     type: String,
     default: '.alleditor-dual .w-e-toolbar, .alleditor-dual .editor-toolbar',
@@ -46,6 +63,7 @@ const emit = defineEmits([
   'wang-created',
   'ue-created',
   'ue-ready',
+  'import',
 ])
 
 /** @type {import('vue').Ref<'wang' | 'ue'>} */
@@ -55,11 +73,17 @@ const wangEditorRef = shallowRef(null)
 const ueEngineRef = shallowRef(null)
 const wangHtml = ref(props.wangPlaceholder)
 const ueHtml = ref('')
+const mdFileInputRef = ref(null)
+const htmlFileInputRef = ref(null)
 let toolbarBinding = null
 let applyingExternal = false
 
 const useUe = computed(() => engineMode.value === 'ue')
 
+const resolvedToolbarConfig = computed(() =>
+  mergeToolbarConfig(props.toolbarConfig, { enableImport: props.enableImport })
+)
+
 function bodyOf(html) {
   return unwrapEditorEngineHtml(html || '') || '<p><br></p>'
 }
@@ -180,6 +204,96 @@ function setEngineMode(mode, html) {
       : body,
     { forceEngine: next }
   )
+  if (next === 'ue' || next === 'wang') {
+    emitModel(body)
+  }
+}
+
+function currentBodyForEmptyCheck() {
+  return bodyOf(getHtml())
+}
+
+function confirmReplaceIfNeeded() {
+  if (!props.confirmReplaceOnImport) return true
+  if (isEffectivelyEmptyHtml(currentBodyForEmptyCheck())) return true
+  return window.confirm('导入将替换当前正文内容，是否继续？')
+}
+
+function openMarkdownPicker() {
+  if (props.disabled) return
+  mdFileInputRef.value?.click?.()
+}
+
+function openHtmlPicker() {
+  if (props.disabled) return
+  htmlFileInputRef.value?.click?.()
+}
+
+async function onMarkdownFileSelected(e) {
+  const file = e.target?.files?.[0]
+  if (e.target) e.target.value = ''
+  if (!file) return
+  if (!/\.md$/i.test(file.name)) {
+    window.alert('请选择 .md 文件')
+    return
+  }
+  if (!confirmReplaceIfNeeded()) return
+  try {
+    const text = await file.text()
+    const html = await markdownToHtml(text || '')
+    setEngineMode('wang', html)
+    emit('import', {
+      type: 'markdown',
+      fileName: file.name,
+      html: getHtml(),
+    })
+  } catch (err) {
+    console.error(err)
+    window.alert(err?.message || '导入 Markdown 失败')
+  }
+}
+
+async function onHtmlFileSelected(e) {
+  const file = e.target?.files?.[0]
+  if (e.target) e.target.value = ''
+  if (!file) return
+  const nameOk =
+    /\.html?$/i.test(file.name) ||
+    /text\/html/i.test(file.type || '')
+  if (!nameOk) {
+    window.alert('请选择 .html / .htm 文件')
+    return
+  }
+  if (!confirmReplaceIfNeeded()) return
+  try {
+    const text = await file.text()
+    const body = stripJavascriptFromHtml(extractHtmlBody(text || ''))
+    const html = body.trim() || '<p><br></p>'
+    setEngineMode('ue', html)
+    emit('import', {
+      type: 'html',
+      fileName: file.name,
+      html: getHtml(),
+    })
+  } catch (err) {
+    console.error(err)
+    window.alert(err?.message || '导入 HTML 失败')
+  }
+}
+
+function wireImportHandlers() {
+  if (!props.enableImport) {
+    bindImportMenuHandlers({
+      onImportHtml: null,
+      onImportMarkdown: null,
+    })
+    return
+  }
+  registerImportMenus()
+  bindImportMenuHandlers({
+    onImportHtml: openHtmlPicker,
+    onImportMarkdown: openMarkdownPicker,
+  })
 }
 
 watch(
@@ -207,10 +321,23 @@ watch(engineMode, (mode) => {
   else unbindToolbar()
 })
 
+watch(
+  () => props.enableImport,
+  () => wireImportHandlers()
+)
+
 applyIncoming(props.modelValue)
 
+onMounted(() => {
+  wireImportHandlers()
+})
+
 onBeforeUnmount(() => {
   unbindToolbar()
+  bindImportMenuHandlers({
+    onImportHtml: null,
+    onImportMarkdown: null,
+  })
   const ed = wangEditorRef.value
   if (ed && !ed.isDestroyed) {
     try {
@@ -228,6 +355,8 @@ defineExpose({
   setEngineMode,
   getWangEditor: () => wangEditorRef.value,
   getUeEngine: () => ueEngineRef.value,
+  openMarkdownPicker,
+  openHtmlPicker,
   engineMode,
 })
 </script>
@@ -237,7 +366,7 @@ defineExpose({
     <Toolbar
       v-if="wangEditorRef"
       :editor="wangEditorRef"
-      :default-config="toolbarConfig"
+      :default-config="resolvedToolbarConfig"
       :mode="mode"
       class="alleditor-dual__toolbar editor-toolbar"
     />
@@ -266,6 +395,22 @@ defineExpose({
         />
       </div>
     </div>
+    <input
+      v-if="enableImport"
+      ref="mdFileInputRef"
+      type="file"
+      accept=".md,text/markdown"
+      class="alleditor-dual__file-input"
+      @change="onMarkdownFileSelected"
+    />
+    <input
+      v-if="enableImport"
+      ref="htmlFileInputRef"
+      type="file"
+      accept=".html,.htm,text/html"
+      class="alleditor-dual__file-input"
+      @change="onHtmlFileSelected"
+    />
   </div>
 </template>
 
@@ -327,4 +472,15 @@ defineExpose({
   min-height: 0;
   height: 100%;
 }
+
+.alleditor-dual__file-input {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  border: 0 !important;
+}
 </style>

package/src/defaultToolbar.ts

@@ -0,0 +1,100 @@
+/**
+ * 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',
+  '|',
+  'fullScreen',
+]
+
+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) {
+    if (!enableImport) return user
+    const keys = user.toolbarKeys
+    const hasMd = keys.some(
+      (k: any) => k === 'importMarkdown' || k?.key === 'importMarkdown'
+    )
+    const hasHtml = keys.some(
+      (k: any) => k === 'sourceCode' || k?.key === 'sourceCode'
+    )
+    if (hasMd && hasHtml) return user
+    const next = [...keys]
+    if (!hasMd) next.push('importMarkdown')
+    if (!hasHtml) next.push('sourceCode')
+    return { ...user, toolbarKeys: next }
+  }
+  const keys = enableImport
+    ? DEFAULT_DUAL_TOOLBAR_KEYS
+    : DEFAULT_DUAL_TOOLBAR_KEYS.filter(
+        (k) => k !== 'importMarkdown' && k !== 'sourceCode'
+      )
+  return { ...user, toolbarKeys: keys }
+}

package/src/importMenus.ts

@@ -0,0 +1,110 @@
+import { Boot } from '@mnykj/alleditor'
+
+/**
+ * 工具栏「HTML」：导入 .html（外观对齐百度 UEditor）。
+ * 实际打开文件选择由 SourceCodeMenu.attrs.onImport 接到宿主。
+ */
+export class SourceCodeMenu {
+  title = '导入 HTML'
+  tag = 'button'
+  iconSvg =
+    '<svg viewBox="0 0 44 24" width="44" height="24"><text x="22" y="16" text-anchor="middle" font-size="12" font-weight="700" font-family="Segoe UI,Helvetica,Arial,sans-serif" fill="#1a73e8">HTML</text></svg>'
+
+  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）。
+ */
+export class ImportMarkdownMenu {
+  title = '导入 Markdown'
+  tag = 'button'
+  iconSvg =
+    '<svg viewBox="0 0 16 16"><path d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path></svg>'
+
+  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,
+  }
+}
+
+let menusRegistered = false
+
+/** 注册导入菜单（幂等；HMR 安全） */
+export function registerImportMenus() {
+  if (menusRegistered) return
+  try {
+    Boot.registerMenu({
+      key: 'sourceCode',
+      factory() {
+        return new SourceCodeMenu()
+      },
+    })
+  } catch {
+    /* 重复注册忽略 */
+  }
+  try {
+    Boot.registerMenu({
+      key: 'importMarkdown',
+      factory() {
+        return new ImportMarkdownMenu()
+      },
+    })
+  } catch {
+    /* 重复注册忽略 */
+  }
+  menusRegistered = true
+}
+
+export function bindImportMenuHandlers(handlers: {
+  onImportHtml?: null | (() => void)
+  onImportMarkdown?: null | (() => void)
+  onToggleSource?: 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
+  }
+}

package/src/index.ts

@@ -16,6 +16,23 @@ export type { UeCommandRunner, BindUeToolbarOptions, UeToolbarBinding } from './
 
 export { DEFAULT_UEDITOR_PUBLIC_BASE } from './ueditorBase'
 
+export {
+  SourceCodeMenu,
+  ImportMarkdownMenu,
+  registerImportMenus,
+  bindImportMenuHandlers,
+} from './importMenus'
+export {
+  DEFAULT_DUAL_TOOLBAR_KEYS,
+  mergeToolbarConfig,
+} from './defaultToolbar'
+export {
+  markdownToHtml,
+  extractHtmlBody,
+  isEffectivelyEmptyHtml,
+} from './markdown'
+export { stripJavascriptFromHtml } from './stripJavascriptFromHtml'
+
 // 协议工具从核心包再导出，方便只装 dual 的调用方
 export type { AllEditorEngine } from '@mnykj/alleditor'
 export {

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
+}