用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt;运行前请先检查来源。
npx skills add https://github.com/ming1zhou88/minemap-skills --skill minemap-plugin-demo-editor命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地?可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | minemap-plugin-demo-editor |
| description | MineMap demo 在线编辑器规范。用于 Monaco 编辑、iframe 预览、WebGL 模式切换与示例试跑台。 |
demo/html/editor-map.html 不是引擎运行时 API,而是 demo 体系里的“在线试跑台 / 示例编辑器”。
它的职责不是渲染地图业务,而是提供:
因此这个 skill 的定位是“工具链 / demo 工位规范”,不是业务地图能力规范。
从 editor-map.html 可确认的核心组织包括:
require(['vs/editor/editor.main'], ...)monaco.editor.create(...)$.get('./' + id + '.html') 按 query 参数加载示例run() 中用 iframe 重新写入 HTMLlocalStorage 记录 WebGL 模式webgl1 时,对 new minemap.Map({...}) 注入 requestWebgl1: trueid 动态装载editor-map.html 通过 URL 的 id 参数加载具体 demo HTML。
这说明示例工作台最稳的组织方式不是把所有示例硬编码到页面里,而是:
这样更适合扩 demo 库。
demo 不是直接执行编辑器 DOM 里的脚本,而是:
document.write(adjustedHtml)这意味着示例执行环境和编辑器工作台是隔离的,便于重置、重跑和避免样式互相污染。
editor-map.html 用 applyWebglMode(html) 在运行前改写源码:
webgl1 时,在 new minemap.Map({ 后注入 requestWebgl1: true这是 demo 工具层很好的做法,因为:
分屏拖拽时,demo 做了两件关键事:
否则地图会在拖拽过程中截获鼠标事件,导致分栏体验很差。
editor-map.html 并没有把 MineMap 业务逻辑直接写死在壳里,而是把职责限定为:
这是后续扩更多 demo 或教程页面时最稳的方式。
不要把 editor-map.html 当成业务项目要直接依赖的生产能力。它适合:
demo 已经证明,把 requestWebgl1: true 的注入逻辑集中在编辑器壳层,比修改每个示例文件更可维护。
直接在主页面执行 demo 代码,会让:
iframe 是这里的关键隔离层。
只做 CSS 拉伸而不处理 pointer events,地图类 demo 很容易拖不动分隔条。
这个 demo 更适合教学和调试,不适合作为完整线上 SaaS 编辑平台直接照搬。
会导致示例文件越来越脏,也不利于批量回归测试。
一旦示例内部也操作全局对象、键盘事件或样式表,工作台本身会被污染。
layout()demo/html/editor-map.htmldemo/index.htmldemo/src/config.jsdemo/src/index.js(旧版 CodeMirror 试跑页,可作为历史对照)minemap-performance-and-backendminemap-fundamentalsminemap-plugin-editminemap-plugin-echarts-integration基于 SOC 职业分类