Ant Design Pro Integrated Markdown Editor Tutorial

There are three ways to embed the Markdown editor in your Ant Design Pro project: 1. Quick access with react-markdown-editor-lite, the component is lightweight and full-featured, supports real-time preview, syntax highlighting, and is suitable for most projects; 2. Use CodeMirror combined with remark to achieve a more customized solution, suitable for scenarios that require custom behavior or avoid introducing a full rich text editor. 3. Pay attention to style compatibility, it is recommended to use CSS modules to isolate the influence of style, and unify the theme style and responsive adaptation. In addition, the original Markdown content should be preserved when data is saved, and HTML from untrusted sources should be avoided when rendering to ensure data security.

Embedding the Markdown editor in Ant Design Pro projects is actually a relatively common requirement, such as for content publishing, document editing, and other scenarios. The key is to choose the right Markdown editor components and adapt them to Ant Design Pro’s page structure and styling system.

Here are a few common methods and considerations to help you integrate the Markdown editor smoothly.

---

1. Use react-markdown-editor-lite Fast access

It’s a lightweight and full-featured React Markdown editor component that supports features like real-time preview, syntax highlighting, and more, making it suitable for most projects.

The steps are as follows:

• Installation dependencies:

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

• Introduce and use in your page:

import React, { useState } from 'react';
import MdEditor from 'react-markdown-editor-lite';
import MarkdownIt from 'markdown-it';

const mdParser = new MarkdownIt();

const MarkdownEditor = () => {
  const [content, setContent] = useState('');

  const handleEditorChange = ({ html, text }) => {
    setContent(text);
  };

  return (
    <MdEditor
      value={content}
      onChange={handleEditorChange}
      parser={mdParser}
      style={{ height: '500px' }}
    />
  );
};

export default MarkdownEditor;

Merit:

• Easy to get started and ready to use right out of the box.
• It supports common functions such as code block highlighting, tables, and expressions.
• It is compatible with Ant Design Pro.

---

2. Use CodeMirror + remark Achieve more customized solutions

If you need a more lightweight or highly customized editor (e.g. only supports plain text input), you can do so in combination with CodeMirror and remark.

The steps are as follows:

• Installation dependencies:

npm install codemirror @codemirror/lang-markdown @codemirror/lang-html remark remark-html

• Basic usage examples:

import React, { useEffect, useRef } from 'react';
import { EditorView } from 'codemirror';
import { markdown } from '@codemirror/lang-markdown';
import remark from 'remark';
import html from 'remark-html';

const MarkdownCodeMirror = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    if (editorRef.current) {
      const view = new EditorView({
        extensions: [markdown()],
        parent: editorRef.current,
      });
    }
  }, []);

  return <div ref={editorRef}></div>;
};

You can pass what the user input is remark Convert to HTML for presentation.

Applicable scenarios:

• Requires custom editor behavior (e.g., shortcuts, syntax checking).
• I don’t want to introduce a full rich text editor.

---

3. Precautions and style compatibility issues

Ant Design Pro is used by default antd Some Markdown editors may come with their own styles, which are prone to style conflicts or display anomalies.

Suggested Treatment:

• Isolation style impact:

  • Use CSS Modules or scoped Styles (if CSS-in-JS schemes).
  • Wrap the editor in a separate container and limit its style scope.

• Unified theme style:

  • Modify the editor’s default style file to match the color and font with the Ant Design theme.
  • You can refer to it antd variable to adjust the editor’s theme color.

• Mobile Adaptation:

  • Check how the editor’s layout behaves on small screens and add responsive styles if necessary.

---

4. Data saving and rendering security

When you use the Markdown editor in Ant Design Pro, you often end up saving and rendering content as an HTML page.

The following points need to be noted:

• The original Markdown content should be stored instead of directly storing HTML.
• Avoid using it when rendering dangerouslySetInnerHTML, unless you trust the content source.
• For user-submitted content, we recommend using a whitelisting mechanism to filter HTML tags.

---

That’s basically all.
Embedding in the Markdown editor is not complicated, but it is important to pay attention to several key points: component selection, style compatibility, and data security. As long as the right components are selected and the details are well done, they can be well integrated into the Ant Design Pro project.