Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kkfor/for-editor
for-editor - A markdown editor based on React
https://github.com/kkfor/for-editor
component editor javascript markdown markdown-editor react
Last synced: 4 days ago
JSON representation
for-editor - A markdown editor based on React
- Host: GitHub
- URL: https://github.com/kkfor/for-editor
- Owner: kkfor
- License: mit
- Created: 2018-12-21T13:31:55.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-08-22T11:19:13.000Z (over 3 years ago)
- Last Synced: 2024-12-30T05:13:46.882Z (11 days ago)
- Topics: component, editor, javascript, markdown, markdown-editor, react
- Language: TypeScript
- Homepage: https://md.kkfor.com/
- Size: 296 KB
- Stars: 405
- Watchers: 6
- Forks: 77
- Open Issues: 39
-
Metadata Files:
- Readme: README.EN.md
- License: LICENSE
Awesome Lists containing this project
README
# for-editor
> for-editor-A markdown editor based on React
- [demo](https://md.kkfor.com)
- [github](https://github.com/kkfor/for-editor)
### Install
```js
npm install for-editor -S
```
### Use
```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'))
```
### Api
#### 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 |
| 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 (
this.addImg($file)}
onChange={(value) => this.handleChange(value)}
/>
)
}
}
```
#### hot key
| name | description |
| ------ | ----------- |
| tab | two space |
| ctrl+s | save |
| ctrl+z | undo |
| ctrl+y | redo |
### Update
- [Update Log](./doc/UPDATELOG.md)
# Licence
for-editor is [MIT Licence](./LICENSE).