Home

Awesome

🎄 md-editor-rt

English | 中文

Markdown editor for react, developed in jsx and typescript.

⭐️ Features

🗺 Preview

Default themeDark themePreview only

Inputing prompt and mark, emoji extensions

📦 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.