React Draft.js toolbar plugin not showing

Question

I've followed the docs on installing the inline and static toolbar plugins, but they seems to be nonexistent.

I'm using the Create React App CLI.

The component:

import React from 'react';
import {EditorState} from 'draft-js';
import Editor from 'draft-js-plugins-editor';

import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
import createToolbarPlugin from 'draft-js-static-toolbar-plugin';

import 'draft-js/dist/Draft.css';
import 'draft-js-inline-toolbar-plugin/lib/plugin.css';
import 'draft-js-static-toolbar-plugin/lib/plugin.css';

const inlineToolbarPlugin = createInlineToolbarPlugin({
 //I read somewhere that this plug-in needs this structure passed to it, 
 //but the example in the docs did not use it, and they are undefined anyway
  // structure: [
  //   BoldButton,
  //   ItalicButton,
  //   UnderlineButton,
  //   CodeButton,
  //   Separator,
  // ],
});

const toolbarPlugin = createToolbarPlugin();

class TextEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
      <Editor 
        editorState={this.state.editorState} 
        onChange={this.onChange}
        plugins={[inlineToolbarPlugin, toolbarPlugin]}
      />
    );
  }
}

export default TextEditor;

That component is then passed to another component that just renders the editor and does nothing else.

I must be missing something, or not giving the plugins what they need, I just don't know what. I'm guessing the code I have is insufficient to start adding plugins in the first place?

score 1 · Answer 1 · answered Apr 05 '18 at 06:24

1

You can define custom buttons to perform the desired operations like below:

<Editor 
editorState={this.state.editorState} 
onChange={this.onChange}
plugins={[inlineToolbarPlugin, toolbarPlugin]}
/>
<button onClick={this._onBoldClick.bind(this)}>Bold</button> //add button to make bold

And now you can write a code to make bold in _onBoldClick method as follows:

_onBoldClick() {
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
}

You can take reference from the docs.

answered Apr 05 '18 at 06:24

Triyugi Narayan Mani

3,039
8
36
56

I'm aware, but I still plan on using other plugins. My aim is to be able to install Draftjs plugins overall – Draxy Apr 05 '18 at 06:59
1

@Draxy OK. No problem. I added this answer for any users trying to achieve this kind of facility. – Triyugi Narayan Mani Apr 05 '18 at 07:01

score 1 · Answer 2 · answered Jun 20 '18 at 23:49

1

You need to import the buttons before you can create the toolbar

import {
  ItalicButton,
  BoldButton,
  UnderlineButton,
  CodeButton
} from "draft-js-buttons";

Also, you need to include the toolbar in your render function

const { Toolbar } = inlineToolbarPlugin;

render() {
  return (
    <div>
      <Editor 
         editorState={this.state.editorState} 
         onChange={this.onChange}
         plugins={[inlineToolbarPlugin, toolbarPlugin]}
       />
       <Toolbar />
    </div>
);

answered Jun 20 '18 at 23:49

grantnz

7,322
1
31
38

incomplete information shared. using copy paste didn't work. inlineToolbarPlugin is not defined error. Would have been better if you had imported all required things in your example. – omair azam Sep 23 '20 at 07:29
1

Yes, that would have been helpful although that info was in the question which is probably why I didn't repeat it – grantnz Sep 23 '20 at 07:38

React Draft.js toolbar plugin not showing

2 Answers2