{"id":24874529,"url":"https://github.com/harrychen0506/react-markdown-editor-lite","last_synced_at":"2025-05-14T20:04:28.344Z","repository":{"id":38806204,"uuid":"166745531","full_name":"HarryChen0506/react-markdown-editor-lite","owner":"HarryChen0506","description":"a light-weight Markdown editor based on  React. 一款轻量的基于React的markdown编辑器","archived":false,"fork":false,"pushed_at":"2023-09-27T20:58:26.000Z","size":4847,"stargazers_count":1069,"open_issues_count":57,"forks_count":161,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-13T16:09:30.301Z","etag":null,"topics":["component","editor","html","markdown","parser","react"],"latest_commit_sha":null,"homepage":"https://harrychen0506.github.io/react-markdown-editor-lite/","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/HarryChen0506.png","metadata":{"files":{"readme":"README.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}},"created_at":"2019-01-21T03:56:31.000Z","updated_at":"2025-04-12T15:42:20.000Z","dependencies_parsed_at":"2024-06-10T05:51:42.380Z","dependency_job_id":"8348d033-2384-4b92-8e83-784212b91c89","html_url":"https://github.com/HarryChen0506/react-markdown-editor-lite","commit_stats":{"total_commits":403,"total_committers":24,"mean_commits":"16.791666666666668","dds":"0.47394540942928043","last_synced_commit":"40fbe8e08a5a0444f306f7614669ad08d7b8f359"},"previous_names":["harrychen0506/rc-md2html"],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryChen0506%2Freact-markdown-editor-lite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryChen0506%2Freact-markdown-editor-lite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryChen0506%2Freact-markdown-editor-lite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryChen0506%2Freact-markdown-editor-lite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HarryChen0506","download_url":"https://codeload.github.com/HarryChen0506/react-markdown-editor-lite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741204,"owners_count":21154255,"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":["component","editor","html","markdown","parser","react"],"created_at":"2025-02-01T07:21:21.623Z","updated_at":"2025-04-13T16:09:35.075Z","avatar_url":"https://github.com/HarryChen0506.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-markdown-editor-lite\n\n[![NPM package][npm-version-image]][npm-url]\n[![NPM downloads][npm-downloads-image]][npm-url]\n[![MIT License][license-image]][license-url]\n[![Workflow][workflow-image]][workflow-url]\n\n[中文说明](README_CN.md)\n\n- A light-weight(20KB zipped) Markdown editor of React component\n- Supports TypeScript\n- Supports custom markdown parser\n- Full markdown support\n- Supports pluggable function bars\n- Full control over UI\n- Supports image uploading and dragging\n- Supports synced scrolling between editor and preview\n- 一款轻量的基于 React 的 Markdown 编辑器, 压缩后代码只有 20KB\n- 支持 TypeScript\n- 支持自定义 Markdown 解析器\n- 支持常用的 Markdown 编辑功能，如加粗，斜体等等...\n- 支持插件化的功能键\n- 界面可配置, 如只显示编辑区或预览区\n- 支持图片上传或拖拽\n- 支持编辑区和预览区同步滚动\n\n## Demo\n\nOnline demo \u003cbr\u003e[https://harrychen0506.github.io/react-markdown-editor-lite/](https://harrychen0506.github.io/react-markdown-editor-lite/)\n\nDefault configuration\n\n![image](https://github.com//HarryChen0506/react-markdown-editor-lite/blob/master/image/react-markdown-editor-lite-v1.0.0.PNG?raw=true)\n\nPluggable bars\n\n![image](https://github.com//HarryChen0506/react-markdown-editor-lite/blob/master/image/react-markdown-editor-lite-v1.0.0-plugins.PNG?raw=true)\n\n## Install\n\n```shell\nnpm install react-markdown-editor-lite --save\n# or\nyarn add react-markdown-editor-lite\n```\n\n## Basic usage\n\nFollowing steps:\n\n- Import react-markdown-editor-lite\n- Register plugins if required\n- Initialize a markdown parser, such as markdown-it\n- Start usage\n\n```js\n// import react, react-markdown-editor-lite, and a markdown parser you like\nimport React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport MarkdownIt from 'markdown-it';\nimport MdEditor from 'react-markdown-editor-lite';\n// import style manually\nimport 'react-markdown-editor-lite/lib/index.css';\n\n// Register plugins if required\n// MdEditor.use(YOUR_PLUGINS_HERE);\n\n// Initialize a markdown parser\nconst mdParser = new MarkdownIt(/* Markdown-it options */);\n\n// Finish!\nfunction handleEditorChange({ html, text }) {\n  console.log('handleEditorChange', html, text);\n}\nexport default props =\u003e {\n  return (\n    \u003cMdEditor style={{ height: '500px' }} renderHTML={text =\u003e mdParser.render(text)} onChange={handleEditorChange} /\u003e\n  );\n};\n```\n\n- Props and configurations see [here](./docs/configure.md)\n- APIs see [here](./docs/api.md)\n- Plugins developer see [here](./docs/plugin.md)\n- Full demo see [src/demo/index.tsx](https://github.com/HarryChen0506/react-markdown-editor-lite/blob/master/src/demo/index.tsx)\n\n## Usage in server-side render\n\nIf you are using a server-side render framework, like Next.js, Gatsby, please use client-side render for this editor.\n\nFor example, Next.js has [next/dynamic](https://nextjs.org/docs/advanced-features/dynamic-import), Gatsby has [loadable-components](https://www.gatsbyjs.org/docs/using-client-side-only-packages/#workaround-3-load-client-side-dependent-components-with-loadable-components)\n\nFollowing is a example for Next.js:\n\n```js\nimport dynamic from 'next/dynamic';\nimport 'react-markdown-editor-lite/lib/index.css';\n\nconst MdEditor = dynamic(() =\u003e import('react-markdown-editor-lite'), {\n  ssr: false,\n});\n\nexport default function() {\n  return \u003cMdEditor style={{ height: '500px' }} renderHTML={/* Render function */} /\u003e;\n}\n```\n\nWith plugins:\n\n```js\nimport dynamic from 'next/dynamic';\nimport 'react-markdown-editor-lite/lib/index.css';\n\nconst MdEditor = dynamic(\n  () =\u003e {\n    return new Promise(resolve =\u003e {\n      Promise.all([\n        import('react-markdown-editor-lite'),\n        import('./my-plugin'),\n        /** Add more plugins, and use below */\n      ]).then(res =\u003e {\n        res[0].default.use(res[1].default);\n        resolve(res[0].default);\n      });\n    });\n  },\n  {\n    ssr: false,\n  },\n);\n\nexport default function() {\n  return \u003cMdEditor style={{ height: '500px' }} renderHTML={/* Render function */} /\u003e;\n}\n```\n\nFull example see [here](https://codesandbox.io/s/next-js-80bne)\n\n## Import in Browser\n\nSince 1.1.0, You can add `script` and `link` tags in your browser and use the global variable `ReactMarkdownEditorLite`.\n\nYou can download these files directly from [![cdnjs][cdnjs-image]][cdnjs-url] [![jsdelivr][jsdelivr-image]][jsdelivr-url] [![unpkg][unpkg-image]][unpkg-url]\n\nNote: you should import react before `ReactMarkdownEditorLite`.\n\nFor example, in webpack, you import ReactMarkdownEditorLite by `script` tag in your page, and write webpack config like this:\n\n```js\nexternals: {\n  react: 'React',\n  'react-markdown-editor-lite': 'ReactMarkdownEditorLite'\n}\n```\n\n## More demos\n* [Basic usage](https://codesandbox.io/s/rmel-demo-ref-in-function-component-u04gb)\n* [With unform](https://codesandbox.io/s/rmel-demo-with-unform-qx34y)\n* [Write a plugin](https://codesandbox.io/s/rmel-demo-write-plugin-p82fc)\n* [Replace default icons](https://codesandbox.io/s/rmel-demo-replace-icon-pl1n3)\n* [In Next.js](https://codesandbox.io/s/next-js-80bne)\n\n## Authors\n\n- ShuangYa [github/sylingd](https://github.com/sylingd)\n- HarryChen0506 [github/HarryChen0506](https://github.com/HarryChen0506)\n\n## License\n\n[MIT](LICENSE)\n\n[npm-version-image]: https://img.shields.io/npm/v/react-markdown-editor-lite.svg\n[npm-downloads-image]: https://img.shields.io/npm/dm/react-markdown-editor-lite.svg?style=flat\n[npm-url]: https://www.npmjs.com/package/react-markdown-editor-lite\n[workflow-image]: https://img.shields.io/github/workflow/status/HarryChen0506/react-markdown-editor-lite/main\n[workflow-url]: https://github.com/HarryChen0506/react-markdown-editor-lite/actions?query=workflow%3Amain\n[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat\n[license-url]: LICENSE\n[jsdelivr-image]: https://img.shields.io/jsdelivr/npm/hm/react-markdown-editor-lite\n[jsdelivr-url]: https://www.jsdelivr.com/package/npm/react-markdown-editor-lite?path=lib\n[cdnjs-image]: https://img.shields.io/cdnjs/v/react-markdown-editor-lite?style=flat\n[cdnjs-url]: https://cdnjs.com/libraries/react-markdown-editor-lite\n[unpkg-image]: https://img.shields.io/npm/v/react-markdown-editor-lite?label=unpkg\u0026style=flat\n[unpkg-url]: https://unpkg.com/browse/react-markdown-editor-lite/lib/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharrychen0506%2Freact-markdown-editor-lite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharrychen0506%2Freact-markdown-editor-lite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharrychen0506%2Freact-markdown-editor-lite/lists"}