如何将 Markdown 编辑器嵌入到 Ant Design Pro 项目中

在ant design pro项目中嵌入markdown编辑器的方法有三种：1. 使用react-markdown-editor-lite快速接入，该组件轻量且功能齐全，支持实时预览、语法高亮，适合大多数项目；2. 使用codemirror结合remark实现更定制化方案，适用于需要自定义行为或避免引入完整富文本编辑器的场景；3. 注意样式兼容问题，建议使用css modules隔离样式影响，并统一主题风格与响应式适配；此外，数据保存时应保留原始markdown内容，渲染时避免直接使用不可信来源的html，确保数据安全。

在 Ant Design Pro 项目中嵌入 Markdown 编辑器，其实是一个比较常见的需求，比如用于内容发布、文档编辑等场景。关键在于选择合适的 Markdown 编辑器组件，并将其适配到 Ant Design Pro 的页面结构和样式体系中。

下面介绍几种常用方法和注意事项，帮助你顺利集成 Markdown 编辑器。

1. 使用 react-markdown-editor-lite 快速接入

这是一个轻量且功能齐全的 React Markdown 编辑器组件，支持实时预览、语法高亮等功能，适合大多数项目使用。

步骤如下：

npm install react-markdown-editor-lite markdown-it