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