React-quill: How do you create custom toolbar buttons in react-quill?

[akshaygoyal88]

I am trying to create a custom toolbar button which will open up a modal and user can select images from their when image selected it should be inserted in the content.
So how how can I customize and register a module like this with react-quill ?
Thanks in Advance.

[alexkrolick]

In the next version of Quill (1.0), you can pass the toolbar and modules config into the initializer:

See this fork for a 1.0 compatible version: https://github.com/alexkrolick/react-quill/releases/tag/v2.0.0-rc.1

[zenoamaro]

This is supported in the latest version, and only needs to be enabled in the toolbar. See the examples in the README and the Quill toolbar documentation for information on how to do this.

[Dagur]

The documentation is very unclear and I've been wracking my brain over this all day.

So far I've come up with this:

var EmailEditor = React.createClass({
    modules: {
        toolbar: {
            container: ['bold', 'italic', 'custom'],  // Selector for toolbar container
            handlers: {
                'custom': function () { alert( "DAGUR"); }
            }
        }
    },

    render: function() {
        return (
          <div className="text-editor">
            <ReactQuill onChange={this.props.onChange}
                        modules={this.modules}>                
                <div key="editor"
                     ref="editor"
                     className="quill-contents"                     
                     dangerouslySetInnerHTML={{__html:this.props.value}} />
            </ReactQuill>
        </div>
    );
},

Where do I put the custom HTML for the new button?

[Dagur]

I think I finally figured it out

var EmailEditor = React.createClass({
    modules: {
        toolbar: {
            container: "#toolbar",
            handlers: {
                "insertName": function () {                                       
                    this.quill.insertText(this.quill.getSelection().index, "test");                    
                }
            }
        }
    },
    render: function() {
        return (
          <div className="text-editor">
              <div id="toolbar">
                  <button className="ql-bold"></button>
                  <button className="ql-italic"></button>
                  <button className="ql-insertName">Name</button>
              </div>  
              <ReactQuill onChange={this.props.onChange} modules={this.modules}>                                              
                <div key="editor"                     
                     ref="editor"
                     className="quill-contents"                     
                     dangerouslySetInnerHTML={{__html:this.props.value}}></div>
              </ReactQuill>
        </div>);
    }
});

[alexkrolick]

Added a new example and a Codepen demo to the README

[sam201994]

How do I add custom tags to the toolbar. I want to add

---

tag to the toolbar. or is there any other editor which has this feature with other basics one

[alexkrolick]

@sam201994

You can use the custom toolbar API here: https://github.com/zenoamaro/react-quill#custom-toolbar

[avdbg]

@Dagur I think it's really easy. Just use your first code and add some CSS to change the "custom" button's content. Like this:

.ql-custom:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);

    content: "\f0c7";
}

The button will become a floppy icon. The code is copied from font-awesome.css.
There is a problem is that I do not know whether the button's class will change in the future version. I hope it will not.

[alexkrolick]

Changing the CSS classes would be considered worthy of a semver major bump, so you should be safe ☺️

[volkandkaya]

@alexkrolick the insert star demo was great. I was just wondering how I would step it up by sending some arguments to the function (custom font selector so I need to send the value selected).

[KiranVH]

Does anyone know how to create dropdown kind of popup when clicking on custom created toolbar button