react-markdown-editor-lite
- A light-weight(size 69KB) Markdown editor of React component
- Support TypeScript
- Support custom markdown parser
- Support Markdown Syntax: bold, italic, etc.
- Support UI configuration: show only editor or previewer area
- Support image upload
- Support synch scrolling with editor and previewer
- 一款轻量的基于React的Markdown编辑器, 压缩后代码只有69KB
- 支持TypeScript
- 支持自定义Markdown解析器
- 界面可配置, 如只显示编辑区或预览区
- 支持常用的markdown编辑功能,如加粗,斜体等等...
- 支持图片上传
- 支持编辑区和预览区同步滚动
Demo
online demo https://harrychen0506.github.io/react-markdown-editor-lite/
Install
npm install react-markdown-editor-lite --save
Props
Property | Description | Type | default | Remarks |
---|---|---|---|---|
value | markdown content | String | '' | required |
name | the name prop of textarea | String | 'textarea' | not required |
style | component container style | Object | {height: '100%'} | not required |
config | component config | Object | {view: {...}, logger: {...}} | not required |
config.view | component UI | Object | {menu: true, md: true, html: true} | |
config.htmlClass | Html section class attribute | String | <Empty string> |
|
config.markdownClass | Markdown section class attribute | String | <Empty string> |
|
config.imageUrl | default image url | String | '' | |
config.linkUrl | default link url | String | '' | |
config.table | table maximum value of row and column | Object | {maxRow: 4, maxCol: 6} | |
config.logger | logger in order to undo or redo | Object | {interval: 3000} | |
config.synchScroll | Does it support synch scroll? | Boolean | true | |
config.imageAccept | Accept image extensions, such as .jpg,.png |
String | <Empty string> |
|
onChange | emitting when editor has changed | Function | ({html, text}, event) => {} | not required |
onImageUpload | when image uploaded, callback emitting will get image markdown text | (file: File, callback: (url: string) => void) => void; | ({file, callback}) => {} | not required |
renderHTML | Render markdown text to HTML. You can return either string, function or Promise | (text: string) => string|function|Promise | none | required |
API
MdEditor.getMdValue () => String
this api return a markdown content
MdEditor.getHtmlValue () => String
this api return a html text
Custom Markdown Parser
we recommend using markdown-it as markown parser, because it supports configurable syntax and has many community-written plugins.You can use any other parser instead of markdown-it.
npm install markdown-it --save
Basic Usage
Use markdown-it as markdown parser
'use strict'; const MOCK_DATA = "Hello.\n\n * This is markdown.\n * It is fun\n * Love it or leave it."Component mdParser = null { superprops thismdParser = /* Markdown-it options */ } { console } { return <div style="height: 500px"> <MdEditor value=MOCK_DATA renderHTML= thismdParser onChange=thishandleEditorChange /> </div> }
More Example
'use strict';// import 'highlight.js/styles/github.css'; const MOCK_DATA = "Hello.\n\n * This is markdown.\n * It is fun\n * Love it or leave it."Component mdEditor = null mdParser = null { superprops // initial a parser thismdParser = html: true linkify: true typographer: true { if lang && hljs try return hljsvalue catch __ {} return '' // use external default escaping } thisrenderHTML = thisrenderHTML } { console } { const reader = reader { const convertBase64UrlToBlob = { let arr = urlData mime = arr01 let bstr = let n = bstrlength let u8arr = n while n-- u8arrn = bstr return u8arr type:mime } const blob = } reader } { // 模拟异步渲染Markdown return { } } { thismdEditor && } { thismdEditor && } { return <div> <nav> <button onClick=thishandleGetMdValue >getMdValue</button> <button onClick=thishandleGetHtmlValue >getHtmlValue</button> </nav> <section style="height: 500px"> <MdEditor ref= thismdEditor = node value=MOCK_DATA style=height: '400px' renderHTML=thisrenderHTML config= view: menu: true md: true html: true imageUrl: 'https://octodex.github.com/images/minion.png' onChange=thishandleEditorChange onImageUpload=thishandleImageUpload /> </section> </div> }
Using in Next.js
const MdEditor = ; { return <div style="height: 500px"> <MdEditor value="" renderHTML=/* Render function */ /> </div> }
Authors
- HarryChen0506 github/HarryChen0506
- sylingd github/sylingd