{"id":15048762,"url":"https://github.com/imzbf/md-editor-rt","last_synced_at":"2025-05-15T03:06:22.349Z","repository":{"id":37449484,"uuid":"392870971","full_name":"imzbf/md-editor-rt","owner":"imzbf","description":"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...","archived":false,"fork":false,"pushed_at":"2025-05-08T12:37:04.000Z","size":22771,"stargazers_count":373,"open_issues_count":0,"forks_count":52,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2025-05-08T13:37:31.806Z","etag":null,"topics":["editor","markdown","markdown-editor","react","ssr","theme"],"latest_commit_sha":null,"homepage":"https://imzbf.github.io/md-editor-rt","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imzbf.png","metadata":{"files":{"readme":"README-CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-08-05T01:44:38.000Z","updated_at":"2025-05-08T12:32:10.000Z","dependencies_parsed_at":"2024-04-15T11:49:36.199Z","dependency_job_id":"625b12f9-a496-4484-b0c8-e30a50756140","html_url":"https://github.com/imzbf/md-editor-rt","commit_stats":{"total_commits":859,"total_committers":4,"mean_commits":214.75,"dds":"0.15715948777648425","last_synced_commit":"d40eb9fd99a1a75da899cbd431eb4b87863cab0f"},"previous_names":[],"tags_count":152,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imzbf%2Fmd-editor-rt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imzbf%2Fmd-editor-rt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imzbf%2Fmd-editor-rt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imzbf%2Fmd-editor-rt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imzbf","download_url":"https://codeload.github.com/imzbf/md-editor-rt/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254264766,"owners_count":22041793,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","markdown","markdown-editor","react","ssr","theme"],"created_at":"2024-09-24T21:16:05.164Z","updated_at":"2025-05-15T03:06:22.325Z","avatar_url":"https://github.com/imzbf.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# 🎄 md-editor-rt\n\n![](https://img.shields.io/github/package-json/v/imzbf/md-editor-rt) ![](https://img.shields.io/npm/dm/md-editor-rt) ![](https://img.shields.io/github/license/imzbf/md-editor-rt) ![](https://img.shields.io/badge/ssr-%3E1.0.0-brightgreen) ![](https://img.shields.io/badge/webcomponent-%3E4.19.0-brightgreen)\n\n[English](https://github.com/imzbf/md-editor-rt) \\| 中文\n\n`react`版本的 Markdown 编辑器，使用`jsx`和`typescript`开发。\n\n- 文档与在线预览：[传送门](https://imzbf.github.io/md-editor-rt)\n\n- [md-editor-v3](https://imzbf.github.io/md-editor-v3)同系列项目。\n\n## ⭐️ 功能一览\n\n- 快捷插入内容工具栏、编辑器浏览器全屏、页面内全屏等。\n- 内置的白色主题和暗黑主题，支持绑定切换。\n- 支持快捷键插入内容； 支持使用 prettier 格式化内容（使用 CDN 方式引入，只支持格式化 md 内容，可在代码内设置关闭）。\n- 多语言，支持自行扩展语言。\n- 粘贴上传图片，图片裁剪上传。\n- 仅预览模式（不显示编辑器，只显示 md 预览内容，无额外监听）。\n- 预览主题，内置`default`、`vuepress`、`github` 、`cyanosis`、`mk-cute`、`smart-blue` 6 种预览主题（不完全相同），支持自定义主题（参考文档 demo 页示例）。\n- `mermaid`绘图（\u003e=1.3.0），`katex`数学公式（\u003e=1.4.0）。\n- 自定义工具栏顺序或显示，自定义扩展工具栏（支持点击类型、下拉菜单类型及弹窗类型）等。\n- 按需引用(\u003e=4.0.0)。\n\n## 🗺 预览图\n\n| 默认模式 | 暗黑模式 | 仅预览 |\n| --- | --- | --- |\n| ![默认模式](https://imzbf.github.io/md-editor-rt/imgs/preview-light.png) | ![暗黑模式](https://imzbf.github.io/md-editor-rt/imgs/preview-dark.png) | ![](https://imzbf.github.io/md-editor-rt/imgs/preview-previewOnly.png) |\n\n输入提示和自定义简单的标记、表情扩展预览\n\n![](https://imzbf.github.io/md-editor-rt/imgs/mark_emoji.gif)\n\n## 📦 安装\n\n```shell\nyarn add md-editor-rt\n```\n\n使用已存在的语言、主题扩展，例如：日语\n\n```shell\nyarn add @vavt/cm-extension\n```\n\n使用更多的扩展工具栏组件，例如：导出内容为 PDF\n\n```shell\nyarn add @vavt/rt-extension\n```\n\n更多使用及贡献方式参考：[md-editor-extension](https://github.com/imzbf/md-editor-extension)\n\n## 💡 用法\n\n从`v4.0.0`开始，内部组件支持按需引用。\n\n### ✍🏻 编辑器模式\n\n```jsx\nimport React, { useState } from 'react';\nimport { MdEditor } from 'md-editor-rt';\nimport 'md-editor-rt/lib/style.css';\n\nexport default () =\u003e {\n  const [text, setText] = useState('# Hello Editor');\n  return \u003cMdEditor modelValue={text} onChange={setText} /\u003e;\n};\n```\n\n### 📖 仅预览模式\n\n```jsx\nimport React, { useState } from 'react';\nimport { MdEditor, MdCatalog } from 'md-editor-rt';\nimport 'md-editor-rt/lib/preview.css';\n\nconst scrollElement = document.documentElement;\n\nexport default () =\u003e {\n  const [text] = useState('# Hello Editor');\n  const [id] = useState('preview-only');\n\n  return (\n    \u003c\u003e\n      \u003cMdEditor id={id} modelValue={text} /\u003e\n      \u003cMdCatalog editorId={id} scrollElement={scrollElement} /\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n当使用服务端渲染时，`scrollElement`应该是字符类型，例：`html`、`body`、`#id`、`.class`。\n\n---\n\n更多用法请前往 [文档](https://imzbf.github.io/md-editor-rt)。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimzbf%2Fmd-editor-rt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimzbf%2Fmd-editor-rt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimzbf%2Fmd-editor-rt/lists"}