0.0.1 • Published 5 years ago
markdown-editor-react-weixiao v0.0.1
以下为原作API
react-markdown-editor-lite
- 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 image upload
- Support synch scrolling with editor and previewer
- 一款轻量的基于React的Markdown编辑器, 压缩后代码只有66KB
- 使用markdown-it作为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 |
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.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 | |
onChange | emitting when editor has changed | Function | ({html, md}) => {} | not required |
onImageUpload | when image uploaded, callback emitting will get image markdown text | Function | ({file, callback}) => {} | not required |
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';
import React from 'react'
import ReactDOM from 'react-dom'
import MdEditor from 'react-markdown-editor-lite'
const mock_content = "Hello.\n\n * This is markdown.\n * It is fun\n * Love it or leave it."
export default class Demo extends React.Component {
handleEditorChange ({html, md}) {
console.log('handleEditorChange', html, md)
}
render() {
return (
<div style="height: 500px">
<MdEditor
value={mock_content}
onChange={this.handleEditorChange}
/>
</div>
)
}
}
More Example
'use strict';
import React from 'react'
import ReactDOM from 'react-dom'
import MdEditor from 'react-markdown-editor-lite'
const mock_content = "Hello.\n\n * This is markdown.\n * It is fun\n * Love it or leave it."
export default class Demo extends React.Component {
mdEditor = null
handleEditorChange ({html, md}) {
console.log('handleEditorChange', html, md)
}
handleImageUpload = (file, callback) => {
const reader = new FileReader()
reader.onload = () => {
const convertBase64UrlToBlob = (urlData) => {
let arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type:mime})
}
const blob = convertBase64UrlToBlob(reader.result)
setTimeout(() => {
// setTimeout 模拟oss异步上传图片
// 当oss异步上传获取图片地址后,执行calback回调(参数为imageUrl字符串),即可将图片地址写入markdown
callback('https://avatars0.githubusercontent.com/u/21263805?s=40&v=4')
}, 1000)
}
reader.readAsDataURL(file)
}
handleGetMdValue = () => {
this.mdEditor && alert(this.mdEditor.getMdValue())
}
handleGetHtmlValue = () => {
this.mdEditor && alert(this.mdEditor.getHtmlValue())
}
render() {
return (
<div>
<nav>
<button onClick={this.handleGetMdValue} >getMdValue</button>
<button onClick={this.handleGetHtmlValue} >getHtmlValue</button>
</nav>
<section style="height: 500px">
<MdEditor
ref={node => this.mdEditor = node}
value={mock_content}
style={{height: '400px'}}
config={{
view: {
menu: true,
md: true,
html: true
},
imageUrl: 'https://octodex.github.com/images/minion.png'
}}
onChange={this.handleEditorChange}
onImageUpload={this.handleImageUpload}
/>
</section>
</div>
)
}
}
References / Thanks
Big thanks to markdown-it authors
License
0.0.1
5 years ago