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, support defalut、vuepress、github styles(not identical).
• mermaid(>=1.3.0).
• katex mathematical formula（>=1.4.0）.

More features are developing, if you have some ideas or find issues, please tell me~

Preview

Default theme	Dark theme	Preview only

Apis

Props

name	type	default	description
modelValue	String	''	Markdown content
theme	'light' | 'dark'	'light'	Change editor theme
editorClass	String	''
hljs	Object	null	Highlight instance, editor will not insert script of it, but you need to import highlight code style by yourself
highlightJs	String	[email protected]	HighlightJs url
highlightCss	String	[email protected]	Highlight code style
historyLength	Number	10	The max length of history(if it is too big, editor will use more RAM)
pageFullScreen	Boolean	false	Screenfull in web page
preview	Boolean	true	Preview content in editor
htmlPreview	Boolean	false	Preview html in editor
previewOnly	Boolean	false	Only render article content, no toolbar, no edit area
language	String	'zh-CN'	Build-in language('zh-CN','en-US')
languageUserDefined	Object	{key: StaticTextDefaultValue}	Expand language, update language api to your key
toolbars	Array	[toolbars]	Show some item of toolbars, all keyssee toolbars below
toolbarsExclude	Array	[]	Don't show some item of toolbars, all keystoolbars
prettier	Boolean	true	Use prettier to beautify content or not
prettierCDN	String	[email protected]
prettierMDCDN	String	[email protected]
cropperCss	String	[email protected]	Cropper css url
cropperJs	String	[email protected]	Cropper js url
iconfontJs	String	iconfont	Icon url
editorId	String	md-editor-rt	Editor id, also the html id, it is used when there are more than two editors
tabWidth	Number	2	One tab eq some space
showCodeRowNumber	Boolean	false	Show row number for code block or not
screenfull	Object	null	Screenfull instance, editor will not insert script of it
screenfullJs	String	[email protected]	Screenfull js url
previewTheme	'default' | 'github' | 'vuepress'	'default'	Preview themes
style	CSSProperties	{}	Editor's inline style
mermaid	Object	undefined	mermaid instance
mermaidJs	String	[email protected]	mermaidJs url
noMermaid	Boolean	false	do not use mermaid
placeholder	String	''
katex	Object	undefined	katex instance(you need import css by yourself.)
katexJs	String	[email protected]	katexJs url
katexCss	String	[email protected]	katexCss url
noKatex	Boolean	false	do not use katex
defToolbars	Array<DropdownToolbar | NormalToolbar>	null	Customize Toolbar, for more usage, please refer to docs and emoji
extensions	Array	[]	marked extensions

mark and emoji extensions

[toolbars]

[
  'bold',
  'underline',
  'italic',
  '-',
  'strikeThrough',
  'title',
  'sub',
  'sup',
  'quote',
  'unorderedList',
  'orderedList',
  '-',
  'codeRow',
  'code',
  'link',
  'image',
  'table',
  'mermaid',
  'katex',
  '-',
  'revoke',
  'next',
  'save',
  '=',
  'pageFullscreen',
  'fullscreen',
  'preview',
  'htmlPreview',
  'catalog',
  'github'
];

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

Expand language, you need to replace all the content here：

[StaticTextDefaultValue]

export interface ToolbarTips {
  bold?: string;
  underline?: string;
  italic?: string;
  strikeThrough?: string;
  title?: string;
  sub?: string;
  sup?: string;
  quote?: string;
  unorderedList?: string;
  orderedList?: string;
  codeRow?: string;
  code?: string;
  link?: string;
  image?: string;
  table?: string;
  mermaid?: string;
  katex?: string;
  revoke?: string;
  next?: string;
  save?: string;
  prettier?: string;
  pageFullscreen?: string;
  fullscreen?: string;
  catalog?: string;
  preview?: string;
  htmlPreview?: string;
  github?: string;
  '-'?: string;
  '='?: string;
}

export interface StaticTextDefaultValue {
  // Toolbar hover tips(html title)
  toolbarTips?: ToolbarTips;
  // h1-h6 dropdown menu item
  titleItem?: {
    h1?: string;
    h2?: string;
    h3?: string;
    h4?: string;
    h5?: string;
    h6?: string;
  };
  imgTitleItem?: {
    link: string;
    upload: string;
    clip2upload: string;
  };
  // The modal tips of add link or upload picture
  linkModalTips?: {
    title?: string;
    descLable?: string;
    descLablePlaceHolder?: string;
    urlLable?: string;
    UrlLablePlaceHolder?: string;
    buttonOK?: string;
  };
  // The modal tips of clip the picture
  clipModalTips?: {
    title?: string;
    buttonUpload?: string;
  };
  // Copy code tips
  copyCode?: {
    text?: string;
    tips?: string;
  };
  mermaid?: {
    flow?: string;
    sequence?: string;
    gantt?: string;
    class?: string;
    state?: string;
    pie?: string;
    relationship?: string;
    journey?: string;
  };
  // 1.4.0
  katex?: {
    // formula inline
    inline: string;
    // formula block
    block: string;
  };
}

Event

name	type	description
onChange	(v: string) => void	Content changed event(bind to oninput of textarea)
onSave	(v: string) => void	Save Content event, ctrl+sand click button will trigger
onUploadImg	(files: Array, callback: function) => void	Upload picture event, when picture is uploading the modal will not close, please provide right urls to the callback function
onHtmlChanged	(h: string) => void	Compile markdown successful event, you can use it to get the html code
onGetCatalog	(list: HeadList[]) => void	Get catalogue of article
markedHeading	(text: string,level: 1-6,raw: string, slugger: Slugger) => string	marked head renderer methods
markedHeadingId	(text: string, level: number) => string	title ID generator
sanitize	(html: string) => string	Sanitize the html, prevent XSS.
markedImage	(href: string, title: string, desc: string) => string	Overrides the html element structure of the default generated picture

If markedHeading is overridden, be sure to tell the editor the algorithm for generating the title ID by marketheadingid.

Shortcut key

key	function	description
TAB	insert space	Insert space, the length eq tabWidth, default: 2, support multiline
SHIFT + TAB	delete space, setting is the same as Tab
CTRL + C	copy	When selected, copy the selected content. When not selected, copy the content of the current line
CTRL + X	shear	When selected, cut the selected content. When not selected, cut the current line
CTRL + D	delete	When selected, delete the selected content. When not selected, delete the current line
CTRL + S	save	Trigger onSave event
CTRL + B	bold text	**bold**
CTRL + U	underline	<u>underline</u>
CTRL + I	italic	*italic*
CTRL + 1-6	h1-h6	# title
CTRL + ↑	superscript	<sup>superscript</sup>
CTRL + ↓	subscript	<sub>subscript</sub>
CTRL + Q	quote	> quote
CTRL + O	ordered list	1. ordered list
CTRL + L	link	[link](https://github.com/imzbf/md-editor-v3)
CTRL + Z	withdraw	Withdraw history in editor, not the function of system
CTRL + SHIFT + S	line-through	~line-through~
CTRL + SHIFT + U	unordered list	- unordered list
CTRL + SHIFT + C	code block
CTRL + SHIFT + I	picture	
CTRL + SHIFT + Z	forward	Forward history in editor, not the function of system
CTRL + SHIFT + F	Beautify
CTRL + ALT + C	code row
CTRL + SHIFT + ALT + T	table	|table|

Internal components

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

NormalToolbar

Editor.NormalToolbar

• title: string, not necessary, the tips when hover toolbar;
• trigger: string | JSX.Element, necessary, it is usually an icon, which is displayed on the toolbar;
• onClick: (e: MouseEvent) => void, necessary.

DropdownToolbar

Editor.DropdownToolbar

• title: string, not necessary, the tips when hover toolbar;
• visible: boolean, necessary;
• trigger: string | JSX.Element, necessary, it is usually an icon, which is displayed on the toolbar;
• onChange: (visible: boolean) => void, necessary;
• overlay: string | JSX.Element, necessary, contents in the drop-down box.

Catalogue

Editor.Catalog

• editorId: string, necessary, 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.

Some examples

Jsx module

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

export default function App() {
  const [text, setText] = useState('hello md-editor-rt！');

  return (
    <Editor
      modelValue={text}
      onChange={(modelValue) => {
        setText(modelValue);
      }}
    />
  );
}

Upload picture

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

async onUploadImg(files: Array<File>, callback: (urls: string[]) => void) {
  const res = await Promise.all(
    files.map((file) => {
      return new Promise((rev, rej) => {
        const form = new FormData();
        form.append('file', file);

        axios
          .post('/api/img/upload', form, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          })
          .then((res) => rev(res))
          .catch((error) => rej(error));
      });
    })
  );

  callback(res.map((item: any) => item.data.url));
}

More

Go to the example page: go