Repository files navigation

This repo is not maintained, I would encourage not using it.

A rich text editor built using facebook'sdraft.js.

Takes inspiration from the text editors onmedium andfacebook notes.

npm install draft-js-editor --save

Import theEditor class into your file. The example below usesES6 but it's not mandatory.

//...importEditorfrom'draft-js-editor'classMyClassextendsReact.Component{state={};render(){return<div>      A sample text editor<EditoronChange={(editorState)=>this.setState({ editorState})}editorState={this.state.editorState}/></div>}}

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

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

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 andconvertToRaw

These methods require aContentState which you can obtain by callinggetCurrentContent on theeditorState object returned from theonChange event.

You can use the staticcreateWithContent 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)