How to customize the toolbar

[mattruma]

This is more of question than an issue ... how would you customize the toolbar, which would include some of the standard options, and then a custom option or two? Similar to what is found at https://github.com/Ionaru/easy-markdown-editor#toolbar-customization.

Trying to figure out how to grab the EasyMDE instance and pass it in the toolbar configuration.

Any help would be much appreciated!

[mattruma]

Figured it out ...

render() {
    const toolbar = [
      {
        name: "bold",
        action: function customFunction(editor) {
          editor.toggleBold();
        },
        className: "fa fa-bold",
        title: "Bold"
      }
    ];

    return (
      <div className="rich-text-editor">
        <SimpleMDE
          id={this.props.name}
          onChange={this.handleOnChange}
          value={this.state.value}
          options={{
            autofocus: true,
            spellChecker: false,
            toolbar: toolbar
          }}
        />
      </div>
    );
  }
}

Might be a better way, but this is what is working for me.

[RIP21]

@mattruma yup something like that. Usually, you just go to the easymde docs itself and do what they say, and bingo :P This one is very light and, I must admit, stupid wrapper :D

[mattruma]

Hey @RIP21 ... thanks for your work with this wrapper ... working great for my project!

[koreaLtd]

Another convenient way is to use the showIcons option

options={{
 showIcons: ['strikethrough', 'code', 'table', 'redo', 'heading', 'undo', 'heading-bigger', 'heading-smaller', 'heading-1', 'heading-2', 'heading-3', 'clean-block', 'horizontal-rule']
}}