for-editor-dark

react markdown editor

Usage no npm install needed!

<script type="module">
  import forEditorDark from 'https://cdn.skypack.dev/for-editor-dark';
</script>

README

for-editor

for-editor-A markdown editor based on React

Install

npm install for-editor -S

Use

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 <Editor value={value} onChange={() => this.handleChange()} />
  }
}

ReactDOM.render(<App />, 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
/*
  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
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 (
      <Editor
        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

Update

Licence

for-editor is MIT Licence.