diff --git a/demo.html b/demo.html index b48e7e9..2934127 100644 --- a/demo.html +++ b/demo.html @@ -14,12 +14,11 @@ -

父页面（同源）加载子页面 index.html（支持 ?filePath=URL）

+

父页面通过地址拼接加载子页面（filePath + mode=edit）

- - - - 支持传入 JSON（完整编辑器数据）或纯文本（作为正文）。文件将以 blob: URL 形式传递，保证同源。 + + + 仅拼接 iframe src：index.html?filePath=URL&mode=edit
@@ -27,45 +26,16 @@ const editorFrame = document.getElementById('editorFrame') const loadBtn = document.getElementById('loadBtn') const urlInput = document.getElementById('urlInput') - const fileInput = document.getElementById('fileInput') - function setFrameSrc(fileUrl) { - const src = `./index.html?filePath=${encodeURIComponent(fileUrl)}` + loadBtn.onclick = () => { + const typedUrl = urlInput.value.trim() + const base = './index.html' + const src = typedUrl + ? `${base}?filePath=${encodeURIComponent(typedUrl)}&mode=edit` + : `${base}?mode=edit` editorFrame.src = src console.log('[demo] 设置 iframe src:', src) } - - loadBtn.onclick = async () => { - const typedUrl = urlInput.value.trim() - if (typedUrl) { - // 直接使用同源URL - try { - // 试探一次，确保地址有效（可选） - await fetch(new URL(typedUrl, window.location.href)) - setFrameSrc(typedUrl) - return - } catch (e) { - alert('无法访问该URL，请确认同源且可访问') - return - } - } - - const file = fileInput.files && fileInput.files[0] - if (file) { - // 将本地选择的文件转为 blob: URL（同源），传给子页 - const blobUrl = URL.createObjectURL(file) - setFrameSrc(blobUrl) - return - } - - // 示例：使用内置示例JSON字符串构造 Blob - const example = { - main: [{ value: 'Hello from iframe demo' }] - } - const blob = new Blob([JSON.stringify(example)], { type: 'application/json' }) - const blobUrl = URL.createObjectURL(blob) - setFrameSrc(blobUrl) - } \ No newline at end of file diff --git a/package.json b/package.json index 88161c8..e9293b2 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,12 @@ "docs:build": "vitepress build docs", "docs:preview": "vitepress preview docs", "postinstall": "simple-git-hooks", - "release": "node scripts/release.js" + "release": "node scripts/release.js", + "ball": "vite build && pnpm ct && pnpm cs && pnpm cw", + "bc": "vite build && pnpm cw", + "ct": "rm -rf 'E:/XuZhou/xz-teacher/public/vocd/' && scp -r 'E:/XuZhou/by-onlineeditor/dist/.' 'E:/XuZhou/xz-teacher/public/vocd/'", + "cs": "rm -rf 'E:/XuZhou/xz-student/src/static/vocd/' && scp -r 'E:/XuZhou/by-onlineeditor/dist/.' 'E:/XuZhou/xz-student/src/static/vocd/'", + "cw": "rm -rf 'F:/SVN/工程装备数智化教学软件平台/07 程序代码/gczbjx-ui/public/vocd/' && scp -r 'E:/XuZhou/by-onlineeditor/dist/.' 'F:/SVN/工程装备数智化教学软件平台/07 程序代码/gczbjx-ui/public/vocd/'" }, "devDependencies": { "@rollup/plugin-typescript": "^10.0.1", diff --git a/src/main.ts b/src/main.ts index 5a1c9fe..a71f533 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,4 +1,4 @@ -import { commentList, data, options } from './mock' +import { commentList, options } from './mock' import './style.css' import prism from 'prismjs' import Editor, { @@ -36,29 +36,9 @@ window.onload = function () { const instance = new Editor( container, { - header: [ - { - value: '教材在线编辑器', - size: 32, - rowFlex: RowFlex.CENTER - }, - { - value: '\n测试数据', - size: 18, - rowFlex: RowFlex.CENTER - }, - { - value: '\n', - type: ElementType.SEPARATOR - } - ], - main: data, - // footer: [ - // { - // value: 'canvas-editor', - // size: 12 - // } - // ] + header: [], + main: [], + footer: [] }, options ) @@ -1609,22 +1589,49 @@ window.onload = function () { } ] const modeElement = document.querySelector('.editor-mode')! - modeElement.onclick = function () { - // 模式选择循环 - modeIndex === modeList.length - 1 ? (modeIndex = 0) : modeIndex++ - // 设置模式 - const { name, mode } = modeList[modeIndex] - modeElement.innerText = name - instance.command.executeMode(mode) - // 设置菜单栏权限视觉反馈 - const isReadonly = mode === EditorMode.READONLY + const menuTextDom = document.querySelector('.menu-item-text')! + const modeParam = params.get('mode')?.toLowerCase() + const isEditMode = modeParam === 'edit' + + if (!isEditMode) { + // 默认只读模式：隐藏模式切换与导出/打开/保存 + modeElement.style.display = 'none' + menuTextDom.style.display = 'none' + instance.command.executeMode(EditorMode.READONLY) + // 设置菜单栏权限视觉反馈（只读允许搜索与打印） const enableMenuList = ['search', 'print'] document.querySelectorAll('.menu-item>div').forEach(dom => { const menu = dom.dataset.menu - isReadonly && (!menu || !enableMenuList.includes(menu)) + !menu || !enableMenuList.includes(menu) ? dom.classList.add('disable') : dom.classList.remove('disable') }) + } else { + // URL 指定编辑模式：显示模式切换与导出/打开/保存，并默认切为编辑模式 + modeElement.style.display = '' + menuTextDom.style.display = '' + modeElement.innerText = '编辑模式' + instance.command.executeMode(EditorMode.EDIT) + // 仅在编辑模式下允许模式切换 + modeElement.onclick = function () { + // 模式选择循环 + modeIndex === modeList.length - 1 ? (modeIndex = 0) : modeIndex++ + // 设置模式 + const { name, mode } = modeList[modeIndex] + modeElement.innerText = name + instance.command.executeMode(mode) + // 设置菜单栏权限视觉反馈 + const isReadonly = mode === EditorMode.READONLY + const enableMenuList = ['search', 'print'] + document + .querySelectorAll('.menu-item>div') + .forEach(dom => { + const menu = dom.dataset.menu + isReadonly && (!menu || !enableMenuList.includes(menu)) + ? dom.classList.add('disable') + : dom.classList.remove('disable') + }) + } } // 模拟批注