Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/imzbf/md-editor-rt
Markdown editor for react, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
https://github.com/imzbf/md-editor-rt
editor markdown markdown-editor react ssr theme
Last synced: 4 days ago
JSON representation
Markdown editor for react, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
- Host: GitHub
- URL: https://github.com/imzbf/md-editor-rt
- Owner: imzbf
- License: mit
- Created: 2021-08-05T01:44:38.000Z (over 3 years ago)
- Default Branch: develop
- Last Pushed: 2024-10-29T08:42:29.000Z (4 months ago)
- Last Synced: 2024-10-29T09:43:00.490Z (4 months ago)
- Topics: editor, markdown, markdown-editor, react, ssr, theme
- Language: TypeScript
- Homepage: https://imzbf.github.io/md-editor-rt
- Size: 31.4 MB
- Stars: 320
- Watchers: 5
- Forks: 45
- Open Issues: 0
-
Metadata Files:
- Readme: README-CN.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎄 md-editor-rt
    
[English](https://github.com/imzbf/md-editor-rt) \| 中文
`react`版本的 Markdown 编辑器,使用`jsx`和`typescript`开发。
- 文档与在线预览:[传送门](https://imzbf.github.io/md-editor-rt)
- [md-editor-v3](https://imzbf.github.io/md-editor-v3)同系列项目。
## ⭐️ 功能一览
- 快捷插入内容工具栏、编辑器浏览器全屏、页面内全屏等。
- 内置的白色主题和暗黑主题,支持绑定切换。
- 支持快捷键插入内容; 支持使用 prettier 格式化内容(使用 CDN 方式引入,只支持格式化 md 内容,可在代码内设置关闭)。
- 多语言,支持自行扩展语言。
- 粘贴上传图片,图片裁剪上传。
- 仅预览模式(不显示编辑器,只显示 md 预览内容,无额外监听)。
- 预览主题,内置`default`、`vuepress`、`github` 、`cyanosis`、`mk-cute`、`smart-blue` 6 种预览主题(不完全相同),支持自定义主题(参考文档 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](https://github.com/imzbf/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 ;
};
```### 📖 仅预览模式
```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 (
<>
>
);
};
```当使用服务端渲染时,`scrollElement`应该是字符类型,例:`html`、`body`、`#id`、`.class`。
---
更多用法请前往 [文档](https://imzbf.github.io/md-editor-rt)。