@mnykj/alleditor-vue 0.0.0-stage → 1.3.2

package/src/AllEditor.vue

@@ -0,0 +1,669 @@
+<script setup>
+/**
+ * AllEditor 双引擎门面：共用 wang 工具栏。
+ *
+ * 引擎约定：仅「导入 HTML」进入 UE；清空 / 导入 Markdown / 其它编辑回 wang。
+ * v-model 存「可入库」HTML（默认 wang/ue 都包 data-alleditor-engine 根节点）。
+ * 宿主需自行提供 UEditor 静态资源（默认 /ueditor/）。
+ */
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  watch,
+} from 'vue'
+import { Editor, Toolbar } from '@mnykj/alleditor-for-vue'
+import {
+  detectEditorEngine,
+  unwrapEditorEngineHtml,
+  wrapEditorEngineHtml,
+} from '@mnykj/alleditor-core'
+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'
+import './assets/iconfont/iconfont.css'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  mode: { type: String, default: 'default' },
+  disabled: { type: Boolean, default: false },
+  ueditorBase: { type: String, default: '/ueditor/' },
+  toolbarConfig: { type: Object, default: () => ({}) },
+  editorConfig: { type: Object, default: () => ({}) },
+  /** wang 占位正文（UE 模式下避免把高保真 HTML 喂进 Slate） */
+  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 .w-e-toolbar, .alleditor .editor-toolbar',
+  },
+  /** 是否显示工具栏（回收站等只读场景可关） */
+  showToolbar: { type: Boolean, default: true },
+  /** 是否显示正文区（HTML 源码模式可关，工具栏仍保留） */
+  showWorkarea: { type: Boolean, default: true },
+  /** 主栏 class（大纲收起等） */
+  mainClass: { type: String, default: '' },
+})
+
+const emit = defineEmits([
+  'update:modelValue',
+  'change',
+  'engine-change',
+  'wang-created',
+  'ue-created',
+  'ue-ready',
+  'import',
+  'clear',
+  'customAlert',
+  'customPaste',
+])
+
+/** @type {import('vue').Ref<'wang' | 'ue'>} */
+const engineMode = ref(detectEditorEngine(props.modelValue))
+const rootRef = ref(null)
+const wangEditorRef = shallowRef(null)
+/** 对外 wang 代理：getHtml() 返回带协议外层的入库 HTML（不改 for-vue 内部实例） */
+const wangEditorProxyRef = shallowRef(null)
+const ueEngineRef = shallowRef(null)
+// 首帧即用正文初始化，避免先挂占位再 setHtml 时带着失效选区炸 Slate
+const wangHtml = ref(
+  engineMode.value === 'wang'
+    ? unwrapEditorEngineHtml(props.modelValue || '') || props.wangPlaceholder
+    : props.wangPlaceholder
+)
+const ueHtml = ref(
+  engineMode.value === 'ue' ? unwrapEditorEngineHtml(props.modelValue || '') : ''
+)
+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 })
+)
+
+/**
+ * 外壳自己负责协议外层；内部 wang 必须 engineMarker:false，
+ * 否则 getHtml() 带外层 → 剥开回写 modelValue → for-vue 每次 setHtml，表现为一字一顿。
+ */
+const resolvedEditorConfig = computed(() => ({
+  ...props.editorConfig,
+  engineMarker:
+    props.editorConfig &&
+    Object.prototype.hasOwnProperty.call(props.editorConfig, 'engineMarker')
+      ? props.editorConfig.engineMarker
+      : false,
+}))
+
+function bodyOf(html) {
+  return unwrapEditorEngineHtml(html || '') || '<p><br></p>'
+}
+
+function encodeForModel(rawBody) {
+  // 先剥外层再包，保证幂等；wang / ue 默认都写 data-alleditor-engine
+  const body = bodyOf(rawBody)
+  if (engineMode.value === 'ue') {
+    return wrapEditorEngineHtml(body, 'ue', {
+      onlyWhenUe: props.wrapOnlyWhenUe,
+    })
+  }
+  if (props.wrapOnlyWhenUe) return body
+  return wrapEditorEngineHtml(body, 'wang')
+}
+
+function emitModel(rawBody) {
+  const next = encodeForModel(rawBody)
+  emit('update:modelValue', next)
+  emit('change', next, engineMode.value)
+}
+
+function readWangBody(editor) {
+  try {
+    // 优先正文 API，避免把协议外层再喂进外壳内部状态
+    if (typeof editor?.getHtmlBody === 'function') {
+      return editor.getHtmlBody()
+    }
+    if (editor?.__alleditorRawGetHtml) {
+      return editor.__alleditorRawGetHtml()
+    }
+    return bodyOf(editor?.getHtml?.() || wangHtml.value)
+  } catch {
+    return wangHtml.value
+  }
+}
+
+/** 宿主用 wang-created / getWangEditor().getHtml() 时也带回库外层 */
+function createWangEditorProxy(editor) {
+  if (!editor || typeof editor !== 'object') return editor
+  const rawGetHtml =
+    editor.__alleditorRawGetHtml || editor.getHtml.bind(editor)
+  if (!editor.__alleditorRawGetHtml) {
+    editor.__alleditorRawGetHtml = rawGetHtml
+  }
+  return new Proxy(editor, {
+    get(target, prop, receiver) {
+      if (prop === 'getHtml') {
+        return () => encodeForModel(rawGetHtml())
+      }
+      if (prop === 'getHtmlBody' || prop === '__alleditorRawGetHtml') {
+        return rawGetHtml
+      }
+      const value = Reflect.get(target, prop, receiver)
+      return typeof value === 'function' ? value.bind(target) : value
+    },
+  })
+}
+
+/** 内部 wangHtml 只存正文，避免把协议外层再 setHtml 进 Slate */
+function onWangHtmlUpdate(html) {
+  const next = bodyOf(html)
+  if (next === wangHtml.value) return
+  wangHtml.value = next
+}
+
+function applyIncoming(html, { forceEngine } = {}) {
+  applyingExternal = true
+  try {
+    const nextEngine = forceEngine || detectEditorEngine(html)
+    const body = bodyOf(html)
+    if (nextEngine !== engineMode.value) {
+      engineMode.value = nextEngine
+      emit('engine-change', nextEngine)
+    }
+    if (nextEngine === 'ue') {
+      wangHtml.value = props.wangPlaceholder
+      ueHtml.value = body
+      // 避免把编辑中的正文再 setContent 冲掉（外层 watch / 回写常见）
+      const live = bodyOf(ueEngineRef.value?.getContent?.() || '')
+      if (live !== body) {
+        ueEngineRef.value?.setContent?.(body)
+      }
+      nextTick(() => bindToolbar())
+    } else {
+      unbindToolbar()
+      ueHtml.value = ''
+      wangHtml.value = body
+    }
+  } finally {
+    applyingExternal = false
+  }
+}
+
+function bindToolbar() {
+  unbindToolbar()
+  toolbarBinding = bindUeToolbarAdapter({
+    toolbar: props.toolbarSelector,
+    getUe: () => ueEngineRef.value,
+    shouldCapture: () => engineMode.value === 'ue',
+  })
+  // wang change 会把按钮重新 disabled，UE 态再刷一次可用态
+  nextTick(() => toolbarBinding?.syncEnabled?.())
+}
+
+function unbindToolbar() {
+  toolbarBinding?.unbind?.()
+  toolbarBinding = null
+}
+
+function onWangCreated(editor) {
+  wangEditorRef.value = editor
+  const proxy = createWangEditorProxy(editor)
+  wangEditorProxyRef.value = proxy
+  emit('wang-created', proxy)
+  // UE 模式下 wang 仍会 onChange 刷新工具栏灰态，跟一次同步
+  try {
+    editor.on?.('change', () => {
+      if (engineMode.value === 'ue') toolbarBinding?.syncEnabled?.()
+    })
+  } catch {
+    /* ignore */
+  }
+  if (engineMode.value === 'ue') {
+    nextTick(() => {
+      bindToolbar()
+      toolbarBinding?.syncEnabled?.()
+    })
+  }
+}
+
+function onWangChange(editor) {
+  if (applyingExternal || engineMode.value !== 'wang') return
+  try {
+    const body = bodyOf(readWangBody(editor))
+    if (wangHtml.value !== body) wangHtml.value = body
+    emitModel(body)
+  } catch {
+    emitModel(wangHtml.value)
+  }
+}
+
+function onUeUpdate(html) {
+  if (applyingExternal || engineMode.value !== 'ue') return
+  ueHtml.value = html
+  emitModel(html)
+}
+
+function onUeReady(ue) {
+  emit('ue-ready', ue)
+  bindToolbar()
+}
+
+function onUeCreated(ue) {
+  emit('ue-created', ue)
+}
+
+function getHtml() {
+  if (engineMode.value === 'ue') {
+    const raw =
+      ueEngineRef.value?.getContent?.() ?? ueHtml.value ?? ''
+    return encodeForModel(raw)
+  }
+  try {
+    return encodeForModel(readWangBody(wangEditorRef.value) || wangHtml.value)
+  } catch {
+    return encodeForModel(wangHtml.value)
+  }
+}
+
+function setHtml(html, options = {}) {
+  applyIncoming(html, options)
+}
+
+function getEngineMode() {
+  return engineMode.value
+}
+
+/** 强制切引擎（导入 HTML 等场景） */
+function setEngineMode(mode, html) {
+  const next = mode === 'ue' ? 'ue' : 'wang'
+  const raw = html !== undefined ? html : getHtml()
+  const body = bodyOf(raw)
+  applyIncoming(
+    next === 'ue'
+      ? wrapEditorEngineHtml(body, 'ue')
+      : 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 clearAllContent() {
+  if (props.disabled) return
+  if (!window.confirm('确认清空文档？清空后不可恢复。')) return
+  // 清空后回到 wang；仅导入 HTML 才进入 UE
+  setEngineMode('wang', '<p><br></p>')
+  emit('clear')
+}
+
+function wireImportHandlers() {
+  registerImportMenus()
+  if (!props.enableImport) {
+    bindImportMenuHandlers({
+      onImportHtml: null,
+      onImportMarkdown: null,
+      onClearContent: clearAllContent,
+    })
+    return
+  }
+  bindImportMenuHandlers({
+    onImportHtml: openHtmlPicker,
+    onImportMarkdown: openMarkdownPicker,
+    onClearContent: clearAllContent,
+  })
+}
+
+watch(
+  () => props.modelValue,
+  (html) => {
+    if (applyingExternal) return
+    const incomingEngine = detectEditorEngine(html)
+    const incomingBody = bodyOf(html)
+    const currentBody =
+      engineMode.value === 'ue'
+        ? bodyOf(ueHtml.value)
+        : bodyOf(wangHtml.value)
+    if (
+      incomingEngine === engineMode.value &&
+      incomingBody === currentBody
+    ) {
+      return
+    }
+    applyIncoming(html)
+  }
+)
+
+watch(engineMode, (mode) => {
+  if (mode === 'ue') nextTick(() => bindToolbar())
+  else unbindToolbar()
+})
+
+watch(
+  () => props.enableImport,
+  () => wireImportHandlers()
+)
+
+applyIncoming(props.modelValue)
+
+onMounted(() => {
+  wireImportHandlers()
+})
+
+onBeforeUnmount(() => {
+  unbindToolbar()
+  bindImportMenuHandlers({
+    onImportHtml: null,
+    onImportMarkdown: null,
+    onClearContent: null,
+  })
+  const ed = wangEditorRef.value
+  if (ed && !ed.isDestroyed) {
+    try {
+      ed.destroy()
+    } catch {
+      /* ignore */
+    }
+  }
+})
+
+defineExpose({
+  getHtml,
+  setHtml,
+  getEngineMode,
+  setEngineMode,
+  getWangEditor: () => wangEditorProxyRef.value || wangEditorRef.value,
+  getUeEngine: () => ueEngineRef.value,
+  openMarkdownPicker,
+  openHtmlPicker,
+  engineMode,
+})
+</script>
+
+<template>
+  <div ref="rootRef" class="alleditor" :data-engine="engineMode">
+    <Toolbar
+      v-if="showToolbar && wangEditorRef"
+      :editor="wangEditorRef"
+      :default-config="resolvedToolbarConfig"
+      :mode="mode"
+      class="alleditor__toolbar editor-toolbar"
+    />
+    <div v-show="showWorkarea" class="alleditor__body">
+      <slot name="aside" />
+      <div class="alleditor__main" :class="mainClass">
+        <slot name="main-before" />
+        <!-- UE 时离屏挂着 wang，避免 display:none 破坏 TextArea / Toolbar 绑定 -->
+        <Editor
+          :model-value="wangHtml"
+          :default-config="resolvedEditorConfig"
+          :mode="mode"
+          class="alleditor__wang editor-content"
+          :class="{ 'is-wang-parked': useUe }"
+          @update:model-value="onWangHtmlUpdate"
+          @onCreated="onWangCreated"
+          @onChange="onWangChange"
+          @customAlert="(...a) => emit('customAlert', ...a)"
+          @customPaste="(...a) => emit('customPaste', ...a)"
+        />
+        <div v-if="useUe" class="alleditor__ue-wrap">
+          <UeHtmlEngine
+            ref="ueEngineRef"
+            v-model="ueHtml"
+            :disabled="disabled"
+            :ueditor-base="ueditorBase"
+            class="alleditor__ue"
+            @created="onUeCreated"
+            @ready="onUeReady"
+            @change="onUeUpdate"
+          />
+        </div>
+        <slot name="main-after" />
+      </div>
+    </div>
+    <input
+      v-if="enableImport"
+      ref="mdFileInputRef"
+      type="file"
+      accept=".md,text/markdown"
+      class="alleditor__file-input"
+      @change="onMarkdownFileSelected"
+    />
+    <input
+      v-if="enableImport"
+      ref="htmlFileInputRef"
+      type="file"
+      accept=".html,.htm,text/html"
+      class="alleditor__file-input"
+      @change="onHtmlFileSelected"
+    />
+  </div>
+</template>
+
+<style>
+.alleditor {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  background: #fff;
+  overflow: visible;
+  /* 隔离内部 z-index，避免工具栏压过站点顶栏「所有产品」等下拉 */
+  position: relative;
+  z-index: 0;
+  isolation: isolate;
+}
+
+.alleditor__toolbar,
+.alleditor .editor-toolbar,
+.alleditor .w-e-toolbar {
+  flex-shrink: 0;
+  position: relative;
+  /* 仅在 .alleditor 内部高于 UE 编辑区；不会逃逸盖住站点导航 */
+  z-index: 20;
+  overflow: visible !important;
+}
+
+/*
+ * 不要给每个 .w-e-bar-item 设 z-index，否则会各自形成层叠上下文，
+ * 色板等下拉的 z-index 出不去，会被工具栏下一行按钮盖住。
+ */
+.alleditor .w-e-bar-item {
+  position: relative;
+}
+.alleditor .w-e-drop-panel,
+.alleditor .w-e-select-list,
+.alleditor .w-e-bar-item-menus-container,
+.alleditor .w-e-modal {
+  z-index: 30;
+}
+
+/* UE 编辑区整体压在工具栏之下（iframe 单独合成层易盖住邻居） */
+.alleditor[data-engine='ue'] .alleditor__body {
+  z-index: 1;
+}
+.alleditor[data-engine='ue'] .alleditor__ue-wrap,
+.alleditor[data-engine='ue'] .alleditor__ue,
+.alleditor[data-engine='ue'] .alleditor-ue-engine {
+  position: relative;
+  z-index: 0;
+}
+
+/* iconfont 与工具栏 SVG 对齐 */
+.alleditor .w-e-bar-item .iconfont {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  font-size: 16px;
+  color: inherit;
+  vertical-align: middle;
+}
+
+/* UE 态：可映射按钮由 ueToolbar 去掉 disabled；不可映射项保持灰显即可 */
+.alleditor[data-engine='ue'] .alleditor__toolbar button.disabled,
+.alleditor[data-engine='ue'] .editor-toolbar button.disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.alleditor__body {
+  position: relative;
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.alleditor__main {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.alleditor__wang {
+  flex: 1 1 0;
+  min-height: 0;
+  height: 100%;
+}
+
+.alleditor__wang.is-wang-parked {
+  position: absolute !important;
+  left: -10000px !important;
+  top: 0 !important;
+  width: 800px !important;
+  height: 400px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+  flex: none !important;
+  z-index: -1;
+}
+
+.alleditor__ue-wrap {
+  flex: 1 1 0;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.alleditor__ue {
+  flex: 1 1 0;
+  min-height: 0;
+  height: 100%;
+}
+
+.alleditor__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/DualEditor.vue

@@ -0,0 +1,7 @@
+<script lang="ts">
+/**
+ * @deprecated 请使用 AllEditor。保留此文件仅为兼容旧导入路径。
+ */
+import AllEditor from './AllEditor.vue'
+export default AllEditor
+</script>