Rich Editing Buttons Plugin for DraftJS Plugins Editor

Downloads in past


3962.2.05 years ago7 years agoMinified + gzip package size for draft-js-richbuttons-plugin in KB


DraftJS RichButtons Plugin
npm version Build Status
This is a plugin for the draft-js-plugins-editor. This plugin allows you to add essential rich formatting buttons (inline and block styles) to your plugins-enabled editor.


First instantiate the plugin:
import createRichButtonsPlugin from 'draft-js-richbuttons-plugin';

const richButtonsPlugin = createRichButtonsPlugin();

Now get any desired components for inline or block formatting buttons from the instance:
/* import only the ones you need; all available shown */
const {   
  // inline buttons
  ItalicButton, BoldButton, MonospaceButton, UnderlineButton,
  // block buttons
  ParagraphButton, BlockquoteButton, CodeButton, OLButton, ULButton, H1Button, H2Button, H3Button, H4Button, H5Button, H6Button
} = richButtonsPlugin;

Render these where desired in your component:
<div className="myToolbar">


Rendering Your Own Buttons

The default buttons are intentionally plain, but will pass the needed props down to their child, allowing you to customize rendering to your needs.
Props passed to both inline and block buttons:
- isActive (bool) - true if style / blocktype active in selection - label (string) - default label
Props unique to inline buttons:
- toggleInlineStyle (func) - to be attached to your click event - inlineStyle (string) - the draft code for the style - onMouseDown (func) - attach this to the onMouseDown event of your custom controls; important for preventing focus from leaving the editor when toggling an inline style with a click
Props unique to block buttons:
- toggleBlockType (func) - to be attached to your click event - blockType (string) - the draft code for the block type
  Stateless component for inline style buttons, using the passed props as well as a custom prop "iconName"
const MyIconButton = ({iconName, toggleInlineStyle, isActive, label, inlineStyle, onMouseDown, title}) =>
  <a onClick={toggleInlineStyle} onMouseDown={onMouseDown}>
      className={`fa fa-${iconName}`}
      title={title ? title : label}
      style={{ color: isActive ? '#000' : '#777' }}

The above presentational component could then be used this way:
  <MyIconButton iconName="bold"/>
  <MyIconButton iconName="italic" title="Italicize" />

Version 2.x.x

The draft-js-plugins project is approaching a v2 milestone, currently in beta. Use the 2.x branch of this repository if moving to the lastest version of that project; otherwise, 1.x is stable for the current release of draft-js-plugins.

Key Bindings

The plugin automatically applies default key bindings from draft's RichUtils, including Tab / Shift-Tab behavior for nested lists.