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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h3>父页面（同源）加载子页面 index.html（支持 ?filePath=URL）</h3>
|
<h3>父页面通过地址拼接加载子页面（filePath + mode=edit）</h3>
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<input id="urlInput" type="text" placeholder="输入同源文件URL或留空使用示例…" />
|
<input id="urlInput" type="text" placeholder="输入同源文件URL" />
|
||||||
<input id="fileInput" type="file" accept=".json,.txt,.ocd" />
|
<button id="loadBtn">设置 iframe 地址</button>
|
||||||
<button id="loadBtn">在 iframe 中打开</button>
|
<small>仅拼接 iframe src：index.html?filePath=URL&mode=edit</small>
|
||||||
<small>支持传入 JSON（完整编辑器数据）或纯文本（作为正文）。文件将以 blob: URL 形式传递，保证同源。</small>
|
|
||||||
</div>
|
</div>
|
||||||
<iframe id="editorFrame" src="./index.html" referrerpolicy="no-referrer"></iframe>
|
<iframe id="editorFrame" src="./index.html" referrerpolicy="no-referrer"></iframe>
|
||||||
|
|
||||||
|
|
@ -27,45 +26,16 @@
|
||||||
const editorFrame = document.getElementById('editorFrame')
|
const editorFrame = document.getElementById('editorFrame')
|
||||||
const loadBtn = document.getElementById('loadBtn')
|
const loadBtn = document.getElementById('loadBtn')
|
||||||
const urlInput = document.getElementById('urlInput')
|
const urlInput = document.getElementById('urlInput')
|
||||||
const fileInput = document.getElementById('fileInput')
|
|
||||||
|
|
||||||
function setFrameSrc(fileUrl) {
|
loadBtn.onclick = () => {
|
||||||
const src = `./index.html?filePath=${encodeURIComponent(fileUrl)}`
|
const typedUrl = urlInput.value.trim()
|
||||||
|
const base = './index.html'
|
||||||
|
const src = typedUrl
|
||||||
|
? `${base}?filePath=${encodeURIComponent(typedUrl)}&mode=edit`
|
||||||
|
: `${base}?mode=edit`
|
||||||
editorFrame.src = src
|
editorFrame.src = src
|
||||||
console.log('[demo] 设置 iframe 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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -46,7 +46,12 @@
|
||||||
"docs:build": "vitepress build docs",
|
"docs:build": "vitepress build docs",
|
||||||
"docs:preview": "vitepress preview docs",
|
"docs:preview": "vitepress preview docs",
|
||||||
"postinstall": "simple-git-hooks",
|
"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": {
|
"devDependencies": {
|
||||||
"@rollup/plugin-typescript": "^10.0.1",
|
"@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 './style.css'
|
||||||
import prism from 'prismjs'
|
import prism from 'prismjs'
|
||||||
import Editor, {
|
import Editor, {
|
||||||
|
|
@ -36,29 +36,9 @@ window.onload = function () {
|
||||||
const instance = new Editor(
|
const instance = new Editor(
|
||||||
container,
|
container,
|
||||||
{
|
{
|
||||||
header: [
|
header: [],
|
||||||
{
|
main: [],
|
||||||
value: '教材在线编辑器',
|
footer: []
|
||||||
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
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
},
|
},
|
||||||
options
|
options
|
||||||
)
|
)
|
||||||
|
|
@ -1609,22 +1589,49 @@ window.onload = function () {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
const modeElement = document.querySelector<HTMLDivElement>('.editor-mode')!
|
const modeElement = document.querySelector<HTMLDivElement>('.editor-mode')!
|
||||||
modeElement.onclick = function () {
|
const menuTextDom = document.querySelector<HTMLDivElement>('.menu-item-text')!
|
||||||
// 模式选择循环
|
const modeParam = params.get('mode')?.toLowerCase()
|
||||||
modeIndex === modeList.length - 1 ? (modeIndex = 0) : modeIndex++
|
const isEditMode = modeParam === 'edit'
|
||||||
// 设置模式
|
|
||||||
const { name, mode } = modeList[modeIndex]
|
if (!isEditMode) {
|
||||||
modeElement.innerText = name
|
// 默认只读模式：隐藏模式切换与导出/打开/保存
|
||||||
instance.command.executeMode(mode)
|
modeElement.style.display = 'none'
|
||||||
// 设置菜单栏权限视觉反馈
|
menuTextDom.style.display = 'none'
|
||||||
const isReadonly = mode === EditorMode.READONLY
|
instance.command.executeMode(EditorMode.READONLY)
|
||||||
|
// 设置菜单栏权限视觉反馈（只读允许搜索与打印）
|
||||||
const enableMenuList = ['search', 'print']
|
const enableMenuList = ['search', 'print']
|
||||||
document.querySelectorAll<HTMLDivElement>('.menu-item>div').forEach(dom => {
|
document.querySelectorAll<HTMLDivElement>('.menu-item>div').forEach(dom => {
|
||||||
const menu = dom.dataset.menu
|
const menu = dom.dataset.menu
|
||||||
isReadonly && (!menu || !enableMenuList.includes(menu))
|
!menu || !enableMenuList.includes(menu)
|
||||||
? dom.classList.add('disable')
|
? dom.classList.add('disable')
|
||||||
: dom.classList.remove('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