HarryChen0506 / React Markdown Editor Lite
Licence: mit
a light-weight Markdown editor based on React. 一款轻量的基于React的markdown编辑器
Stars: ✭ 553
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Markdown Editor Lite
React Markdown
Markdown editor (input) based on React
Stars: ✭ 98 (-82.28%)
Mutual labels: markdown, editor, component
For Editor
for-editor - A markdown editor based on React
Stars: ✭ 358 (-35.26%)
Mutual labels: markdown, editor, component
Marktext
📝A simple and elegant markdown editor, available for Linux, macOS and Windows.
Stars: ✭ 22,894 (+4039.96%)
Mutual labels: markdown, editor
Craftinginterpreters
Repository for the book "Crafting Interpreters"
Stars: ✭ 4,298 (+677.22%)
Mutual labels: markdown, parser
Md4c
C Markdown parser. Fast. SAX-like interface. Compliant to CommonMark specification.
Stars: ✭ 322 (-41.77%)
Mutual labels: markdown, parser
React Md Editor
A simple markdown editor with preview, implemented with React.js and TypeScript.
Stars: ✭ 374 (-32.37%)
Mutual labels: markdown, editor
Text
📑 Collaborative document editing using Markdown
Stars: ✭ 282 (-49.01%)
Mutual labels: markdown, editor
Markdowneditor
Lightweight markdown editor written for windows,only one GREEN exe file
Stars: ✭ 403 (-27.12%)
Mutual labels: markdown, editor
Vue Prism Editor
A dead simple code editor with syntax highlighting and line numbers. 3kb/gz
Stars: ✭ 422 (-23.69%)
Mutual labels: editor, component
Phodit
Phodal's markdown/ebook editor with MicroFrontend & Web Components
Stars: ✭ 301 (-45.57%)
Mutual labels: markdown, editor
Termimad
A library to display rich (Markdown) snippets and texts in a rust terminal application
Stars: ✭ 293 (-47.02%)
Mutual labels: markdown, parser
react-markdown-editor-lite
- A light-weight(20KB zipped) Markdown editor of React component
- Supports TypeScript
- Supports custom markdown parser
- Full markdown support
- Supports pluggable function bars
- Full control over UI
- Supports image uploading and dragging
- Supports synced scrolling between editor and preview
- 一款轻量的基于React的Markdown编辑器, 压缩后代码只有20KB
- 支持TypeScript
- 支持自定义Markdown解析器
- 支持常用的Markdown编辑功能,如加粗,斜体等等...
- 支持插件化的功能键
- 界面可配置, 如只显示编辑区或预览区
- 支持图片上传或拖拽
- 支持编辑区和预览区同步滚动
Demo
Online demo
https://harrychen0506.github.io/react-markdown-editor-lite/
Default configuration
Pluggable bars
Install
npm install react-markdown-editor-lite --save
# or
yarn add react-markdown-editor-lite
Basic usage
Following steps:
- Import react-markdown-editor-lite
- Register plugins if required
- Initialize a markdown parser, such as markdown-it
- Start usage
// import react, react-markdown-editor-lite, and a markdown parser you like
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import MarkdownIt from 'markdown-it'
import MdEditor from 'react-markdown-editor-lite'
// import style manually
import 'react-markdown-editor-lite/lib/index.css';
// Register plugins if required
// MdEditor.use(YOUR_PLUGINS_HERE);
// Initialize a markdown parser
const mdParser = new MarkdownIt(/* Markdown-it options */);
// Finish!
function handleEditorChange({html, text}) {
console.log('handleEditorChange', html, text)
}
export default (props) => {
return (
<MdEditor
style={{ height: "500px" }}
renderHTML={(text) => mdParser.render(text)}
onChange={handleEditorChange}
/>
)
}
- Props and configurations see here
- APIs see here
- Plugins developer see here
- Full demo see src/demo/index.tsx
Usage in server-side render
If you are using a server-side render framework, like Next.js, Gatsby, please use client-side render for this editor.
For example, Next.js has next/dynamic, Gatsby has loadable-components
Following is a example for Next.js:
import dynamic from 'next/dynamic';
import 'react-markdown-editor-lite/lib/index.css';
const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
ssr: false
});
export default function() {
return (
<MdEditor
style={{ height: "500px" }}
renderHTML={/* Render function */}
/>
)
}
Import in Browser
Since 1.1.0, You can add script
and link
tags in your browser and use the global variable ReactMarkdownEditorLite
.
You can download these files directly from
Note: you should import react before ReactMarkdownEditorLite
.
For example, in webpack, you import ReactMarkdownEditorLite by script
tag in your page, and write webpack config like this:
externals: {
react: 'React',
'react-markdown-editor-lite': 'ReactMarkdownEditorLite'
}
More demos
Authors
- ShuangYa github/sylingd
- HarryChen0506 github/HarryChen0506
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].