React-postnzt-markdown NPM

react-postnzt-markdown

react-postnzt-markdown A markdown editor based on React

github

Install

npm install react-postnzt-markdown --save

Use

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Editor from 'react-postnzt-markdown'

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	en	Language switch, zh-CN: Simplified Chinese, en: English
placeholder	String	What is in your mind?...	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: {
  bold: true,
  italic: true,
  qoute: true,
  orderedlist: true,
  unorderedlist: true,
  c1: true,
  c2: true,
  c3: true,
  h1: true,
  h2: true,
  h3: true,
  h4: true,
  img: true,
  link: true,
  code: true,
  preview: true,
  expand: true,
  undo: true,
  redo: true,
  save: true,
  subfield: true
  /** emoji feature will be added on v1.0.7*/
}

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