You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Oct 20, 2023. It is now read-only.
Import the Editor class into your file. The example below uses ES6 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>}}
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