集成、定制或排查 md-editor-v3 时使用。适用于在 Vue 3、Nuxt、Electron 或 Web Component 项目中接入 MdEditor、MdPreview、MdCatalog,给 md-editor-v3 增加图片上传、目录联动、自定义工具栏、主题/语言、markdown-it 与 CodeMirror 扩展、config() 全局依赖替换,以及处理 SSR、样式、MdCatalog 滚动、高亮/公式/mermaid、本地实例替代 CDN、XSS 与副作用等常见问题。
默认把这个 skill 用在下游业务项目里,而不是 md-editor-v3 仓库维护流程里。
本 skill 依据当前仓库的 [email protected] 整理。如果用户项目安装的版本不同,先核对本地安装包版本,再决定是否沿用这里的结论。
md-editor-v3MdPreview 和 MdCatalog 接到文章详情页md-editor-v3 加图片上传或自定义工具栏config() 把 highlight.js / katex / mermaid 改成本地实例MdCatalog 不跟随滚动、SSR 报错、样式不对、保存时 HTML 不更新references/playbook.md#1-最小可编辑接入references/playbook.md#2-只预览--外置目录references/playbook.md#3-在应用启动阶段注入本地依赖实例references/playbook.md#4-图片上传references/playbook.md#6-外部通过-ref-控制编辑器references/api.md#6-自定义工具栏--页脚组件references/playbook.md#8-扩展-markdown-it-插件链references/playbook.md#9-扩展-codemirrorreferences/dependency-matrix.mdreferences/pitfalls.mdreferences/architecture.md先判断用户真正需要什么:
MdEditorMdPreviewMdCatalogDropdownToolbar、ModalToolbar、NormalFooterToolbarconfig()sanitize 或 XSSPluginclearSideEffects()默认接入规则:
MdEditor 导入 md-editor-v3/lib/style.cssMdPreview 导入 md-editor-v3/lib/preview.cssid/editorIdMdCatalog 或业务控制逻辑跨组件联动,显式传同一个 idid 是否稳定。MdCatalog 是否绑定到同一个实例。scrollElement 是否传字符串选择器而不是 DOM。sanitize / XSSPlugin。MdEditor 传已移除的旧 previewOnly prop;业务层预览模式应改用 MdPreview。MdPreview 和 MdEditor 写新代码时,优先使用 id;MdPreview.editorId 仅视为兼容旧代码。MdCatalog 传参时继续使用 editorId,不要误写成 id。onSave 的第二个参数当成 Promise<string> 处理,不要当同步 HTML 字符串用。defToolbars / defFooters”映射,不是按名字自动注册。config() 当作全局单例初始化,而不是组件局部状态。html: true。如果用户反馈“skill 说得对,但项目里行为不一样”,按下面顺序核对:
node_modules/md-editor-v3/package.jsonnode_modules/md-editor-v3/lib/types/index.d.tspackages/MdEditor/props.tspackages/MdEditor/type.tspackages/MdEditor/config.tspackages/MdEditor/composition.tspackages/MdEditor/layouts/Content/composition/useMarkdownIt.tspackages/MdEditor/layouts/Content/composition/useCodeMirror.tspackages/MdPreview/MdPreview.tsxpackages/MdCatalog/MdCatalog.tsx默认不要一上来就从仓库内部实现讲起,除非用户正在调库源码,或者公开 API 已经不足以定位问题。
references/api.mdreferences/playbook.mdreferences/dependency-matrix.mdreferences/pitfalls.mdreferences/architecture.md交付 md-editor-v3 相关改动时,默认说明:
MdEditor / MdPreview / MdCatalogconfig()、事件或 ref API