For-editor-plus NPM

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)}
      />
    )
  }
}