React-quill adding unneeded image tags when inserting non-valid image urls

1k views Asked by At

I use react-quill in my react app and when I press the image button and without inserting a valid url and press insert, an extra image tag is added with src="http://". I don't want this behaviour I want the image tag to be added only if it's a valid url. Is there a way to do so?

Code:

<ReactQuill value={this.state.body} onChange={this.onBodyChange}
          theme="snow" style={{minHeight: 300, minWidth: 600}}/>


onBodyChange = body => this.setState({body});

enter image description here Unneeded image tags

Edit: I tried using handler adding but seems that I cannot override the default handlers.

let handlers = {
      image: function(foo, bar){
        console.log("IMAGE");
      },
      link: function(value) {
        console.log("LINK");
      }
 };
<ReactQuill value={this.state.body} onChange={this.onBodyChange}
              theme="snow" style={{minHeight: 300, minWidth: 600}}>
               <ReactQuill.Toolbar key="toolbar"
                                   ref="toolbar"
                                   handlers={handlers}/>
               <div key="editor"
                    ref="editor"
                    className="quill-contents"/>
</ReactQuill>

And when inspection on the react component, the handler is still image() and link() which I am assuming are the default implementations. And of course no logs and the normal behavior occurs.

enter image description here

0

There are 0 answers