@wonism/react-milkdown

    1.1.3 • 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

    • [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.

    Install

    npm i @wonism/react-milkdown

    DownloadsWeekly Downloads

    1

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    7.41 MB

    Total Files

    55

    Last publish

    Collaborators

    • wonism