Md-editor-rt NPM

🎄 md-editor-rt

npm.io npm.io npm.io

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

npm.io

📦 Install

yarn add md-editor-rt

Use existing extension of language and theme, such as Japanese

yarn add @vavt/cm-extension

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

yarn 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

import React, { useState } from 'react';
import { MdEditor } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';

export default () => {
  const [text, setText] = useState('# Hello Editor');
  return <MdEditor modelValue={text} onChange={setText} />;
};

📖 Preview Only

import React, { useState } from 'react';
import { MdPreview, MdCatalog } from 'md-editor-rt';
import 'md-editor-rt/lib/preview.css';

const scrollElement = document.documentElement;

export default () => {
  const [text] = useState('# Hello Editor');
  const [id] = useState('preview-only');

  return (
    <>
      <MdPreview id={id} modelValue={text} />
      <MdCatalog editorId={id} scrollElement={scrollElement} />
    </>
  );
};

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

For more usage, please visit the document.

react nextjs javascript typescript jsx tsx ssr markdown editor theme html

@codemirror/lang-markdown @codemirror/language-data @types/markdown-it @vavt/copy2clipboard @vavt/util codemirror lru-cache lucide-react markdown-it markdown-it-image-figures markdown-it-sub markdown-it-sup medium-zoom xss

@infinitebrahmanuniverse/nolb-md-@everything-registry/sub-chunk-2145 ws-antd zwx-first-package @duxweb/dux-refine pjblog-theme-default

7 months ago

7 months ago

7 months ago

4 months ago

4 months ago

6 months ago

6 months ago

6 months ago

4 months ago

4 months ago

5 months ago

3 months ago

5 months ago

3 months ago

7 months ago

7 months ago

4 months ago

7 months ago

3 months ago

3 months ago

8 months ago

8 months ago

8 months ago

9 months ago

8 months ago

9 months ago

8 months ago

8 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

10 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

10 months ago

10 months ago

12 months ago

12 months ago

11 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago