React-quill: Creating a handler for a link popup/modal

[glebPotapenko]

I'm using [email protected] in my React component, and would like to customize the "link" button so that it displays a popup/modal in which the user can paste the link and the link text.

So far this is what I've got:

var TextEditor = React.createClass({

    getInitialState: function () {
        return {
            text: this.props.initialData
        }
    },

    onTextChange: function (value) {
        this.setState({ text: value });
    },

    modules: {
        handlers: {
            // handlers object will be merged with default handlers object
            'link': function(value) {
                if (value) {
                    var href = prompt('Enter the URL');
                    this.quill.format('link', href);
                } else {
                    this.quill.format('link', false);
                }
            }
        }
    },

    formats: [
        'header',
        'bold', 'italic', 'underline', 'strike', 'blockquote',
        'list', 'bullet', 'indent',
        'link',
    ],

    render: function () {
        return (
            <ReactQuill theme="snow"
                        value={this.state.text}
                        onChange={this.onTextChange}
                        modules={this.modules}
                        formats={this.formats} />
        )
    }

});
export default TextEditor;

The error message I'm getting is that it can't find the "handlers" module. Any ideas anyone on how to get this working?

[aaronkaz]

I'm running into the same issue attempting to use the handlers property as it is documented

[alexkrolick]

http://quilljs.com/docs/modules/toolbar/#handlers

• The handlers should be extending modules.toolbar, not modules
• You may need a reference to the Quill instance, which is available by attaching a ref to <ReactQuill /> and calling getEditor: https://github.com/zenoamaro/react-quill#methods

[q3e]

This was helpful https://github.com/zenoamaro/react-quill/issues/131

[paigeflourin]

this works for adding link but how do I get the same behavior for edit link?

[shalinipm]

afsafsafsaf

[KiranVH]

Hi I want to create popup on button click in the toolbar which allows user to do search. Does anyone know how to implement in Quill editor

[maxwell-hub]

@KiranVH Hi, look at my answer https://github.com/zenoamaro/react-quill/issues/471#issuecomment-579971349, maybe it will helpful for you