feat: 添加部署脚本并简化iframe加载逻辑
refactor(demo): 移除文件上传功能，仅支持URL拼接加载 refactor(main): 根据URL参数动态设置编辑模式 chore: 在package.json中添加部署相关脚本
This commit is contained in:
parent
41313ac835
commit
1c14e28469
50
demo.html
50
demo.html
|
|
@ -14,12 +14,11 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3>父页面（同源）加载子页面 index.html（支持 ?filePath=URL）</h3>
|
||||
<h3>父页面通过地址拼接加载子页面（filePath + mode=edit）</h3>
|
||||
<div class="panel">
|
||||
<input id="urlInput" type="text" placeholder="输入同源文件URL或留空使用示例…" />
|
||||
<input id="fileInput" type="file" accept=".json,.txt,.ocd" />
|
||||
<button id="loadBtn">在 iframe 中打开</button>
|
||||
<small>支持传入 JSON（完整编辑器数据）或纯文本（作为正文）。文件将以 blob: URL 形式传递，保证同源。</small>
|
||||
<input id="urlInput" type="text" placeholder="输入同源文件URL" />
|
||||
<button id="loadBtn">设置 iframe 地址</button>
|
||||
<small>仅拼接 iframe src：index.html?filePath=URL&mode=edit</small>
|
||||
</div>
|
||||
<iframe id="editorFrame" src="./index.html" referrerpolicy="no-referrer"></iframe>
|
||||
|
||||
|
|
@ -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)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
75
src/main.ts
75
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: <IElement[]>data,
|
||||
// footer: [
|
||||
// {
|
||||
// value: 'canvas-editor',
|
||||
// size: 12
|
||||
// }
|
||||
// ]
|
||||
header: [],
|
||||
main: [],
|
||||
footer: []
|
||||
},
|
||||
options
|
||||
)
|
||||
|
|
@ -1609,22 +1589,49 @@ window.onload = function () {
|
|||
}
|
||||
]
|
||||
const modeElement = document.querySelector<HTMLDivElement>('.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<HTMLDivElement>('.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<HTMLDivElement>('.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<HTMLDivElement>('.menu-item>div')
|
||||
.forEach(dom => {
|
||||
const menu = dom.dataset.menu
|
||||
isReadonly && (!menu || !enableMenuList.includes(menu))
|
||||
? dom.classList.add('disable')
|
||||
: dom.classList.remove('disable')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 模拟批注
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user