react-milkdown
powerful markdown editor for react
Last updated 2 years ago by mirone .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-milkdown 
SYNC missed versions from official npm registry.

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

  • [x] Highlight
  • [x] Multi-line edit
  • [x] Drag Upload Image(support multiple image)
  • [x] Medium editor style control bar
  • [x] Preview
  • [x] Full screen edit
  • [x] 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.

Current Tags

  • 1.1.1                                ...           latest (2 years ago)

11 Versions

  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.9                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 14
Dependencies (9)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |