0.9.2 • Published 6 years ago
jk-react-markdown v0.9.2
jk-react-markdown
Simple markdown editor for react with preview
Install
npm install --save jk-react-markdown
Usage
import 'jk-react-markdown/dist/jk-react-markdown.css'
import Editor from 'jk-react-markdown'
const buttons = [
'b', 'i', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol',
'a', 'img', 'code'
]
<Editor
value={ this.state.value }
onChange={ this.onChange }
buttons={ buttons }
/>
Props
- value: PropTypes.string
- onChange: PropTypes.func
- className: PropTypes.string
- styles: PropTypes.object
- cols: PropTypes.string
- rows: PropTypes.string
- onClickImg: PropTypes.func
- buttons: PropTypes.array
- showPreview: PropTypes.bool
Custom image handler
import 'jk-react-markdown/dist/jk-react-markdown.css'
import Editor from 'jk-react-markdown'
import insertStr from 'jk-react-markdown/src/libs/insertStr'
onClickImg = (ctx) => {
const customPath = prompt('URL', 'https://')
if (!customPath) return
const newText = insertStr({
text: ctx.text,
position: ctx.position,
str: `![](${customPath})`
})
this.onChange(newText)
}
<Editor
value={ this.state.value }
onChange={ this.onChange }
onClickImg={ this.onClickImg }
/>
Styles
let styles = {
editor: {borderColor: '#2c3e50'},
result: {borderColor: '#2c3e50'},
panel: {backgroundColor: '#2c3e50'}
}
Syntax highlighting (highlight.js)
- html
- xml
- css
- javascript
- php
- python
- ruby
- json
- sql
0.9.2
6 years ago
0.9.1
6 years ago
0.9.0
6 years ago
0.8.3
6 years ago
0.8.1
6 years ago
0.8.0
6 years ago
0.7.1
6 years ago
0.7.0
6 years ago
0.6.0
6 years ago
0.5.0
6 years ago
0.4.2
6 years ago
0.4.1
6 years ago
0.4.0
6 years ago
0.3.5
6 years ago
0.3.4
6 years ago
0.3.3
6 years ago
0.3.2
6 years ago
0.3.1
6 years ago
0.3.0
6 years ago
0.2.0
6 years ago
0.1.4
6 years ago
0.1.3
6 years ago
0.1.2
7 years ago
0.1.1
7 years ago
0.1.0
7 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago