1.1.1 • Published 6 years ago

react-milkdown v1.1.1

Weekly downloads
2
License
MIT
Repository
github
Last release
6 years ago

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.

1.1.1

6 years ago

1.1.0

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago