🎄 md-editor-rt

English | 中文

Markdown editor for react, developed in jsx and typescript.

• Documentation and demo：Go

• The same series editor for vue3：md-editor-v3

⭐️ Features

• Toolbar, screenfull or screenfull in web pages and so on.
• Themes, Built-in default and dark themes.
• Shortcut key for editor.
• Beautify your content by prettier(only for markdown content, not the code and other text).
• Multi-language, build-in Chinese and English(default: Chinese).
• Upload picture, paste or clip the picture and upload it.
• Render article directly(no editor, no event listener, only preview content).
• Theme of preview, default, vuepress, github, cyanosis, mk-cute, smart-blue styles(not identical). It can be customized also(Refer to example page).
• mermaid(>=1.3.0), katex mathematical formula（>=1.4.0）.
• Customize the toolbar as you like.
• On-demand Import(>=4.0.0).

🗺 Preview

Default theme	Dark theme	Preview only

Inputing prompt and mark, emoji extensions

📦 Install

1yarn add md-editor-rt

Use existing extension of language and theme, such as Japanese

1yarn add @vavt/cm-extension

Use existing components of toolbar, such as exporting content as PDF

1yarn add @vavt/v3-extension

For more ways to use or contribute, please refer to: md-editor-extension

💡 Usage

Starting from 4.0.0, internal components can be imported on-demand.

✍🏻 Display Editor

1import React, { useState } from 'react';
2import { MdEditor } from 'md-editor-rt';
3import 'md-editor-rt/lib/style.css';
4
5export default () => {
6  const [text, setText] = useState('# Hello Editor');
7  return <MdEditor modelValue={text} onChange={setText} />;
8};

📖 Preview Only

1import React, { useState } from 'react';
2import { MdPreview, MdCatalog } from 'md-editor-rt';
3import 'md-editor-rt/lib/preview.css';
4
5const scrollElement = document.documentElement;
6
7export default () => {
8  const [text] = useState('# Hello Editor');
9  const [id] = useState('preview-only');
10
11  return (
12    <>
13      <MdPreview id={id} modelValue={text} />
14      <MdCatalog editorId={id} scrollElement={scrollElement} />
15    </>
16  );
17};

When using server-side rendering, scrollElement should be of string type, eg: html, body, #id, .class.

---

For more usage, please visit the document.