npm

Need private packages and team management tools?Check out npm Orgs. »

react-milkdown

1.1.1 • Public • Published

react-milkdown · Travis npm version license

Powerful Markdown editor as React components.

Check live demo here!

查看中文说明


Installing

npm install --save react-milkdown
yarn add react-milkdown

Basic usage

import React, { Component } from 'react';
import Milk from 'react-milkdown';
 
import 'font-awesome/css/font-awesome.min.css'; // milkdown uses font-awesome, you can ignore this if your project already import font-awesome
 
class Milkdown extends Component {
  state = {
    value: ""
  }
 
  onChange = value => {
    this.setState({ value });
    return value;
  }
 
  render() {
    const { value } = this.state
    return (
      <Milk
        value={value}
        onChange={this.onChange}
        style={{margin: "0 auto"}}
      />
    )
  }
}

Features

  • Highlight
  • Multi-line edit
  • Drag Upload Image(support multiple image)
  • Medium editor style control bar
  • Preview
  • Full screen edit
  • Paste mode (auto convert newline when paste)

Props

  • value: the context of editor
  • onChange: the only argument of onChange is value. IMPORTANT!!! at the end of this function, you MUST return value
  • style: change the style of milkdown's container

Decorator

Milkdown provide a function (essentially is a decorator) to let you change method of upload file (change to base64 by default), you can use it like this:

import React, { Component } from 'react';
import { milkFileReader } from 'react-milkdown';
 
import 'font-awesome/css/font-awesome.min.css'; // milkdown uses font-awesome, you can ignore this if your project already import font-awesome
 
const blobReader = file => (
  new Promise((res, rej) => {
    const reader = new FileReader();
    reader.onload = () => {
      res(file.preview);
    }
    reader.onerror = reader.onabort = rej;
    reader.readAsDataURL(file);
  })
);
 
const Milk = milkFileReader(blobReader);
 
class Milkdown extends Component {
  state = {
    value: ""
  }
 
  onChange = value => {
    this.setState({ value });
    return value;
  }
 
  render() {
    const { value } = this.state
    return (
      <Milk
        value={value}
        onChange={this.onChange}
        style={{margin: "0 auto"}}
      />
    )
  }
}

License

MIT-licensed. See LICENSE.

install

npm i react-milkdown

Downloadsweekly downloads

4

version

1.1.1

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability