md-editor-rt

English | 中文

Markdown editor for react, developed in jsx and typescript.

• Documentation and demo：Go

• Use it online：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).
• Preview themes, defalut, 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.

Install

1yarn add md-editor-rt

Usage

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
8  return <MdEditor modelValue={text} onChange={setText} />;
9};

Preview

Default theme	Dark theme	Preview only

mark and emoji extensions

Apis

Props

1[
2  'bold',
3  'underline',
4  'italic',
5  '-',
6  'strikeThrough',
7  'title',
8  'sub',
9  'sup',
10  'quote',
11  'unorderedList',
12  'orderedList',
13  '-',
14  'codeRow',
15  'code',
16  'link',
17  'image',
18  'table',
19  'mermaid',
20  'katex',
21  '-',
22  'revoke',
23  'next',
24  'save',
25  '=',
26  'pageFullscreen',
27  'fullscreen',
28  'preview',
29  'htmlPreview',
30  'catalog',
31  'github'
32];

You can sort the toolbar as you like, split tools by '-', the left and right toolbars are divided by '='!

1export interface ToolbarTips {
2  bold?: string;
3  underline?: string;
4  italic?: string;
5  strikeThrough?: string;
6  title?: string;
7  sub?: string;
8  sup?: string;
9  quote?: string;
10  unorderedList?: string;
11  orderedList?: string;
12  codeRow?: string;
13  code?: string;
14  link?: string;
15  image?: string;
16  table?: string;
17  mermaid?: string;
18  katex?: string;
19  revoke?: string;
20  next?: string;
21  save?: string;
22  prettier?: string;
23  pageFullscreen?: string;
24  fullscreen?: string;
25  catalog?: string;
26  preview?: string;
27  htmlPreview?: string;
28  github?: string;
29  '-'?: string;
30  '='?: string;
31}
32
33export interface StaticTextDefaultValue {
34  // Toolbar hover tips(html title)
35  toolbarTips?: ToolbarTips;
36  // h1-h6 dropdown menu item
37  titleItem?: {
38    h1?: string;
39    h2?: string;
40    h3?: string;
41    h4?: string;
42    h5?: string;
43    h6?: string;
44  };
45  // v1.6.0
46  imgTitleItem?: {
47    link: string;
48    upload: string;
49    clip2upload: string;
50  };
51  // The modal tips of add link or upload picture
52  linkModalTips?: {
53    title?: string;
54    descLable?: string;
55    descLablePlaceHolder?: string;
56    urlLable?: string;
57    UrlLablePlaceHolder?: string;
58    buttonOK?: string;
59  };
60  // The modal tips of clip the picture, v1.2.0
61  clipModalTips?: {
62    title?: string;
63    buttonUpload?: string;
64  };
65  // Copy code tips, v1.1.4
66  copyCode?: {
67    text?: string;
68    successTips?: string;
69    failTips?: string;
70  };
71  // 1.8.0
72  mermaid?: {
73    flow?: string;
74    sequence?: string;
75    gantt?: string;
76    class?: string;
77    state?: string;
78    pie?: string;
79    relationship?: string;
80    journey?: string;
81  };
82  // 1.9.0
83  katex?: {
84    // formula inline
85    inline: string;
86    // formula block
87    block: string;
88  };
89  footer?: {
90    markdownTotal: string;
91    scrollAuto: string;
92  };
93}

Event

Config

Use MdEditor.config(option: ConfigOption) to reconfigure renderer.

• markedRenderer: (renderer: RewriteRenderer) => RewriteRenderer

  Open target page in a new browser window:

  1MdEditor.config({
  2  markedRenderer(renderer) {
  3    renderer.link = (href, title, text) => {
  4      return `<a href="${href}" title="${title}" target="_blank">${text}</a>`;
  5    };
  6
  7    return renderer;
  8  }
  9});

  Reference: https://marked.js.org/using_pro#renderer, RewriteRenderer extends Renderer and rewrites heading, now provides index as the fifth parameter.

• markedExtensions: Array<marked.TokenizerExtension & marked.RendererExtension>

  1import MdEditor from 'md-editor-rt';
  2
  3MdEditor.config({
  4  markedExtensions: [your extension]
  5});

  Reference: https://marked.js.org/using_pro#extensions

• markedOptions: marked.MarkedOptions

  Do not render <br> on a single line break:

  1import MdEditor from 'md-editor-rt';
  2
  3MdEditor.config({
  4  markedOptions: { breaks: false }
  5});

  Reference: https://marked.js.org/using_advanced#options

• editorConfig: Add more languages, reset mermaid template or delay rendering time:

  1import MdEditor from 'md-editor-rt';
  2
  3MdEditor.config({
  4  editorConfig: {
  5    languageUserDefined: { lang: StaticTextDefaultValue },
  6    mermaidTemplate: {
  7      flow: `flow tempalte`,
  8      ...more
  9    },
  10    // Default 500ms. It is set to 0ms when preview only and not set.
  11    renderDelay: 500
  12  }
  13});

• editorExtensions: Config some dependency libraries, like highlight..

  1import MdEditor from 'md-editor-rt';
  2
  3MdEditor.config({
  4  editorExtensions: { iconfont: 'https://xxx.cc' }
  5});

  [EditorExtensions]

  1import MdEditor from 'md-editor-rt';
  2
  3interface EditorExtensions {
  4  highlight?: {
  5    instance?: any;
  6    js?: string;
  7    css?: {
  8      [key: string]: {
  9        light: string;
  10        dark: string;
  11      };
  12    };
  13  };
  14  prettier?: {
  15    standaloneJs?: string;
  16    parserMarkdownJs?: string;
  17  };
  18  cropper?: {
  19    instance?: any;
  20    js?: string;
  21    css?: string;
  22  };
  23  iconfont?: string;
  24  screenfull?: {
  25    instance?: any;
  26    js?: string;
  27  };
  28  mermaid?: {
  29    instance?: any;
  30    js?: string;
  31  };
  32  katex?: {
  33    instance?: any;
  34    js?: string;
  35    css?: string;
  36  };
  37}

Shortcut Key

Components

They are used as attributes of the editor component, eg: Editor.DropdownToolbar. For more examples, refer to document.

NormalToolbar

Editor.NormalToolbar

• props

  • title: string, not necessary, title of toolbar.

• events

  • onClick: (e: MouseEvent) => void, necessary.

• slots

  • trigger: string | JSX.Element, necessary, it is usually an icon, which is displayed on the toolbar.

DropdownToolbar

Editor.DropdownToolbar

• props

  • title: string, not necessary, title of toolbar.
  • visible: boolean, necessary.

• events

  • onChange: (visible: boolean) => void, necessary.

• slots

  • trigger: string | JSX.Element, necessary, it is usually an icon, which is displayed on the toolbar.
  • overlay: string | JSX.Element, necessary, content of dropdown box.

ModalToolbar

Editor.ModalToolbar

• props

  • title: string, not necessary, title of toolbar.
  • modalTitle: string, not necessary, title of the Modal.
  • visible: boolean, necessary, visibility of Modal.
  • width: string, not necessary, width of Modal, default auto.
  • height: string, same as width.
  • showAdjust: boolean, not necessary, visibility of fullscreen button.
  • isFullscreen: boolean, necessary when showAdjust = true, status of fullscreen.

• events

  • onClick: () => void, necessary.
  • onClose: () => void, necessary, close event.
  • onAdjust: (val: boolean) => void, fullscreen button click event.

• slots

  • trigger: string | JSX.Element, necessary, it is usually an icon, which is displayed on the toolbar.
  • overlay: string | JSX.Element, necessary, content of Modal.

MdCatalog

Editor.MdCatalog

• props

  • editorId: string, necessary, same as editor's editorId, used to register listening events.
  • class: string, not necessary.
  • markedHeadingId: MarkedHeadingId, not necessary, same as editor.
  • scrollElement: string | HTMLElement, not necessary, it is an element selector when its type is string. When previewOnly eq true, it is usually set to document.documentElement.
  • theme: 'light' | 'dark', not necessary, provide it when you want to change theme online, it is the same as Editor theme.
  • offsetTop: number, not necessary, highlight current item of catalogs when title is offsetTop pixels from the top, defalut 20.

• events

  • onClick: (e: MouseEvent, t: TocItem) => void, not necessary.

Examples

Upload Picture

Tips: When you paste and upload GIF, it will upload a static picture. So you should upload it by file system!

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
8  const onUploadImg = async (files, callback) => {
9    const res = await Promise.all(
10      files.map((file) => {
11        return new Promise((rev, rej) => {
12          const form = new FormData();
13          form.append('file', file);
14
15          axios
16            .post('/api/img/upload', form, {
17              headers: {
18                'Content-Type': 'multipart/form-data'
19              }
20            })
21            .then((res) => rev(res))
22            .catch((error) => rej(error));
23        });
24      })
25    );
26
27    callback(res.map((item) => item.data.url));
28  };
29
30  return <MdEditor modelValue={text} onChange={setText} onUploadImg={onUploadImg} />;
31};

Change Styles

1.css-vars(@isDark) {
2  --md-color: if(@isDark, #999, #222);
3  --md-hover-color: if(@isDark, #bbb, #000);
4  --md-bk-color: if(@isDark, #000, #fff);
5  --md-bk-color-outstand: if(@isDark, #111, #f6f6f6);
6  --md-bk-hover-color: if(@isDark, #1b1a1a, #f5f7fa);
7  --md-border-color: if(@isDark, #2d2d2d, #e6e6e6);
8  --md-border-hover-color: if(@isDark, #636262, #b9b9b9);
9  --md-border-active-color: if(@isDark, #777, #999);
10  --md-modal-mask: #00000073;
11  --md-scrollbar-bg-color: if(@isDark, #0f0f0f, #e2e2e2);
12  --md-scrollbar-thumb-color: if(@isDark, #2d2d2d, #0000004d);
13  --md-scrollbar-thumb-hover-color: if(@isDark, #3a3a3a, #00000059);
14  --md-scrollbar-thumb-avtive-color: if(@isDark, #3a3a3a, #00000061);
15}
16
17.md {
18  .css-vars(false);
19}
20
21.md-dark {
22  .css-vars(true);
23}

Change background color in dark mode:

1.md-dark {
2  --md-bk-color: #333 !important;
3}