Skip to content

Overview.md

Latest commit

 

History

History
57 lines (43 loc) · 1.63 KB

Overview.md

File metadata and controls

57 lines (43 loc) · 1.63 KB
id getting-started
title Overview
layout docs
category Quick Start
next quickstart-api-basics
permalink docs/overview.html

Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.

Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles.

Draft.js was introduced at React.js Conf in February 2016.

<iframe width="650" height="365" src="proxy.php?url=https%3A%2F%2Fgithub.com%2F%3Ca+href%3D"https://www.youtube.com/embed/feUYwoLhE_4" rel="nofollow">https://www.youtube.com/embed/feUYwoLhE_4" frameborder="0" allowfullscreen></iframe>

Installation

Currently Draft.js is distributed via npm. It depends on React and React DOM which must also be installed.

npm install --save draft-js react react-dom

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    const {editorState} = this.state;
    return <Editor editorState={editorState} onChange={this.onChange} />;
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);

Because Draft.js supports unicode, you must have the following meta tag in the <head></head> block of your HTML file:

<meta charset="utf-8" />

Next, let's go into the basics of the API and learn what else you can do with Draft.js.