for-editor-previewer

> for-editor-A markdown editor & previewer based on React
> Add custom previewer styles based on for-editor

- demo
- github

$3

``js
npm install for-editor -S
`

$3

`js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Editor from 'for-editor'

class App extends Component {
constructor() {
super()
this.state = {
value: ''
}
}

handleChange(value) {
this.setState({
value
})
}

render() {
const { value } = this.state
return this.handleChange()} />
}
}

ReactDOM.render(, document.getElementById('root'))
`

$3

#### props

| name | type | default | description |
| ----------- | ------- | --------------------------- | ------------------------------------------------------------------------------------------------------ |
| value | String | - | value |
| language | String | zh-CN | Language switch, zh-CN: Simplified Chinese, en: English |
| placeholder | String | Begin editing... | The default prompt text when the textarea is empty |
| lineNum | Boolean | true | Show lineNum |
| style | Object | - | editor styles |
| height | String | 600px | editor height |
| previewerStyle| Object| - | previewer styles |
| preview | Boolean | false | preview switch |
| expand | Boolean | false | fullscreen switch |
| subfield | Boolean | false | true: Double columns - Edit preview same screen(notice: preview: true), Single Columns - otherwise not |
| toolbar | Object | As in the following example | toolbars |

`js
/*
The default toolbar properties are all true,
You can customize the object to cover them.
eg: {
h1: true,
code: true,
preview: true,
}
At this point, the toolbar only displays the three function keys.
notice: Toolbar will be hidden when empty object.
*/

toolbar: {
h1: true,
h2: true,
h3: true,
h4: true,
img: true,
link: true,
code: true,
preview: true,
expand: true,
/ v0.0.9 /
undo: true,
redo: true,
save: true,
/ v0.2.3 /
subfield: true
}
`

#### events

| name | params | default | description |
| -------- | ------------- | ------- | ------------------------------------------- |
| onChange | String: value | - | Edit area change callback event |
| onSave | String: value | - | Ctrl+s and click save button callback event |
| addImg | File: file | - | upload image callback event |

##### upload image

`js
class App extends Component {
constructor() {
super()
this.state = {
value: ''
}
this.$vm = React.createRef()
}

handleChange(value) {
this.setState({
value
})
}

addImg($file) {
this.$vm.current.$img2Url($file.name, 'file_url')
console.log($file)
}

render() {
const { value } = this.state

return (
ref={this.$vm}
value={value}
addImg={($file) => this.addImg($file)}
onChange={(value) => this.handleChange(value)}
/>
)
}
}
``

#### hot key

| name | description |
| ------ | ----------- |
| tab | two space |
| ctrl+s | save |
| ctrl+z | undo |
| ctrl+y | redo |

$3

- Update Log

Licence

for-editor is MIT Licence.