rc-md2html
- a light-weight(size 66KB) Markdown editor of React component
- use markdown-it as a parser
- Support Markdown Syntax: bold, italic, etc.
- Support UI configuration: show only editor or previewer area
- Support synch scrolling with editor and previewer
- 一款轻量的基于React的Markdown编辑器, 压缩后代码只有66KB
- 使用markdown-it作为Markdown解析器
- 界面可配置, 如只显示编辑区或预览区
- 支持常用的markdown编辑功能,如加粗,斜体等等...
- 支持编辑区和预览区同步滚动
Demo
online demo https://rc-md2html.github.io/
Install
npm install rc-md2html --save
Props
Property | Description | Type | default | Remarks |
---|---|---|---|---|
value | markdown content | String | '' | |
style | component container style | Object | {height: '100%'} | |
config | component config | Object | {view: {...}, logger: {...}} | |
config.view | component UI | Object | {menu: true, md: true, html: true} | |
config.imageUrl | default image url | String | '' | |
config.linkUrl | default link url | String | '' | |
config.logger | logger in order to undo or redo | Object | {interval: 3000} | |
onChange | emitting when editor has changed | Function | ({html, md}) => {} |
API
MdEditor.getMdValue () => String
this api return a markdown content
MdEditor.getHtmlValue () => String
this api return a html text parsed by markdown-it
Basic Usage
'use strict'; const mock_content = "Hello.\n\n * This is markdown.\n * It is fun\n * Love it or leave it."Component { console } { return <div style="height: 500px"> <MdEditor value=mock_content onChange=thishandleEditorChange /> </div> }
More Example
'use strict'; const mock_content = "Hello.\n\n * This is markdown.\n * It is fun\n * Love it or leave it."Component mdEditor = null { console } { 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_content style=height: '400px' config= view: menu: true md: true html: true imageUrl: 'https://octodex.github.com/images/minion.png' onChange=thishandleEditorChange /> </section> </div> }
References / Thanks
Big thanks to markdown-it authors