Skip to content
This repository has been archived by the owner on Mar 29, 2024. It is now read-only.

Home

Jump to bottom
Brijesh Bittu edited this page Oct 16, 2016 · 4 revisions

medium-draft

A medium like rich text editor built upon draft-js with an emphasis on eliminating mouse usage by adding relevant keyboard shortcuts.

Installation

npm

npm install --save medium-draft

Browser

  • Include this stylesheet in your <head> to get the default styling
  • <link rel="stylesheet" type="text/css" href="https://unpkg.com/medium-draft/dist/medium-draft.css">
  • Then import this script in your html
  • <script type="text/javascript" src="https://unpkg.com/medium-draft@0.3.10/dist/medium-draft.js"></script>
  • medium-draft will be available as MediumDraft in the global window object.

When using in browser, make sure that you have also included the javascript for React, ReactDOM, Immutable and Draft.js.

Usage

Simplest

import React from 'react';
import ReactDOM from 'react-dom';

import {
  Editor,
  createEditorState,
} from 'medium-draft';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      editorState: createEditorState(), // for empty content
    };

    /*
    this.state = {
      editorState: createEditorState(data), // if you have initial data
    };
    */

    this.onChange = (editorState) => {
      this.setState({ editorState });
    };
  }

  componentDidMount() {
    this.refs.editor.focus();
  }

  render() {
    const { editorState } = this.state;
    return (
      <Editor
        ref="editor"
        editorState={editorState}
        onChange={this.onChange} />
    );
  }
};
Clone this wiki locally