md-editor-rt用于React的Markdown编辑器
🎄 md-editor-rt
react版本的 Markdown 编辑器，使用jsx和typescript开发。
-
文档与在线预览：传送门
-
md-editor-v3同系列项目。
⭐️ 功能一览
- 快捷插入内容工具栏、编辑器浏览器全屏、页面内全屏等。
- 内置的白色主题和暗黑主题，支持绑定切换。
- 支持快捷键插入内容； 支持使用 prettier 格式化内容（使用 CDN 方式引入，只支持格式化 md 内容，可在代码内设置关闭）。
- 多语言，支持自行扩展语言。
- 粘贴上传图片，图片裁剪上传。
- 仅预览模式（不显示编辑器，只显示 md 预览内容，无额外监听）。
- 预览主题，内置
default、vuepress、github、cyanosis、mk-cute、smart-blue6 种预览主题（不完全相同），支持自定义主题（参考文档 demo 页示例）。 mermaid绘图（>=1.3.0），katex数学公式（>=1.4.0）。- 自定义工具栏顺序或显示，自定义扩展工具栏（支持点击类型、下拉菜单类型及弹窗类型）等。
- 按需引用(>=4.0.0)。
🗺 预览图
| 默认模式 | 暗黑模式 | 仅预览 |
|---|---|---|
 |
 |
 |
输入提示和自定义简单的标记、表情扩展预览
📦 安装
shell
yarn add md-editor-rt使用已存在的语言、主题扩展，例如：日语
shell
yarn add @vavt/cm-extension使用更多的扩展工具栏组件，例如：导出内容为 PDF
shell
yarn add @vavt/rt-extension更多使用及贡献方式参考：md-editor-extension
💡 用法
从v4.0.0开始，内部组件支持按需引用。
✍🏻 编辑器模式
jsx
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} />;
};📖 仅预览模式
jsx
import React, { useState } from 'react';
import { MdEditor, 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 (
<>
<MdEditor id={id} modelValue={text} />
<MdCatalog editorId={id} scrollElement={scrollElement} />
</>
);
};当使用服务端渲染时，scrollElement应该是字符类型，例：html、body、#id、.class。
更多用法请前往 文档。
关于项目
用于 React 的 Markdown 编辑器，使用 jsx 和 typescript 开发，深色主题、使用 prettier 美化内容、直接渲染文章、粘贴或剪辑图片并上传...
MIT
Typescript
411
58
5
2021-08-05
2025-10-10