Skip to content
A rich text editor built using draft js
JavaScript
Branch: master
Clone or download
Latest commit 32cb606 Jun 26, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Improved some stability around the side bar showing and the focus beh… Jun 27, 2018
docs Rebuilt examples bundle. Sep 21, 2017
examples Updated to be compatible with react 16. Nov 22, 2017
lib Improved some stability around the side bar showing and the focus beh… Jun 27, 2018
src Improved some stability around the side bar showing and the focus beh… Jun 27, 2018
.babelrc Updated to be compatible with react 16. Nov 22, 2017
.eslintrc Initial work in progress files, mostly ported from the draft.js Tex e… Feb 28, 2016
.gitignore Removed lib and dist folder from gitignore because npm seems to ignor… Nov 22, 2017
.npmignore Removed lib and dist folder from gitignore because npm seems to ignor… Nov 22, 2017
LICENSE
PATENTS Added PATENTS file that exists in the draft.js repo Mar 16, 2016
README.md Updated the README. Sep 20, 2017
package-lock.json 1.12.4 Jun 27, 2018
package.json 1.12.4 Jun 27, 2018
webpack.config.js Updated build Nov 22, 2017
yarn.lock Improved some stability around the side bar showing and the focus beh… Jun 27, 2018

README.md

draft-js-editor

A rich text editor built using facebook's draft.js.

Takes inspiration from the text editors on medium and facebook notes.

Get started

npm install draft-js-editor --save

Usage

Import the Editor class into your file. The example below uses ES6 but it's not mandatory.

//...
import Editor from 'draft-js-editor'

class MyClass extends React.Component {

  state = {};

  render() {
    return <div>
      A sample text editor
      <Editor 
        onChange={(editorState) => this.setState({ editorState })}
        editorState={this.state.editorState}
      />
    </div>
  }
}

API

The Editor component accepts all the draft-js Editor props with the following additional ones.

Editor Props

  • iconColor The color of the icons
  • iconSelectedColor The color of the icon when selected
  • popoverStyle Override the inline styles for the popover menu controls
  • inlineButtons This should be an array of React elements that will be rendered. Use this to customise the popover inline buttons. There's a 'Custom Inline Buttons' example under examples. Each element that gets rendered gets passed the following props: updateEditorState (call this after doing any editor state manipulations), editorState (the editor state), iconColor, iconSelectedColor.
  • blockButtons Customise the block buttons. See the custom block button example
  • blockTypes An object mapping custom types to components. Simpler than using draft-js's native blockRenderFn property.
  • showInlineButtons Set to false to prevent showing the inline buttons.
  • SideControl Override the side control to completely customise the interface. See the demo for an example.

Saving the state

If you need to persist the editor state somewhere there are two useful methods that are part of the draft-js library that will let you convert to and from a string, convertFromRaw and convertToRaw

These methods require a ContentState which you can obtain by calling getCurrentContent on the editorState object returned from the onChange event.

Hydrating an editor state from raw content

You can use the static createWithContent method to obtain an editor state that can be passed in as a parameter to the Editor.

import { EditorState, convertFromRaw } from 'draft-js'
const contentState = convertFromRaw(rawContent)
const editorState = EditorState.createWithContent(contentState)
You can’t perform that action at this time.