CODEWITHSUNDEEP
reactjstext-editorquillreact-quill
Suong Liang
Suong Liang

Reputation: 75

How to create custom tooltip in React Quill Editor?

I'm integrating a custom toolbar that has the link action

![enter image description here

When user want to add a link to specific text, I want to override the tooltip behavior of Quill editor from default UI

enter image description here

to a UI like this

enter image description here

I've been searching for the solution and found that this can only be done by creating a new theme, but I don't find the documentation for customizing this part in React Quill.

Any help/idea is appreciated.

Upvotes: 3

Views: 2922

Answers (1)

tyzion
tyzion

Reputation: 131

The only way I found to customize the tooltip is to customize the entire toolbar.

https://github.com/zenoamaro/react-quill#html-toolbar

You can create a toolbar component :

const CustomToolbar = () => (
  <div id="my-toolbar">

    <button className="ql-bold"></button>
    <button className="ql-italic"></button>
    <select
      className="ql-header"
      defaultValue={''}
      onChange={(e) => e.persist()}
    >
      <option value="1"></option>
      <option value="2"></option>
      <option selected></option>
    </select>
    <button className="ql-my-link-embedder" onClick={imageHandler}>
      <i class="fa-solid fa-image"></i>
    </button>
  </div>
);

Customize it as you please remembering to add "ql-" in every className attribute.

You then create your own Tooltip component, for example:

const CustomToolbar = () => (
    <div id='my-quill-tooltip' style={{ display: 'none', position: 'absolute', zIndex: 10 }}>
        <input type="text" placeholder='insert url'/>
    <div>
)

You create your own function to execute when you click on your custom button, like this:


const imageHandler = (evt) => {
    console.log('evt: ', evt)
    document.getElementById('my-quill-tooltip').style.display = ''
}

You add the right formats and modules objects to the ReactQuill component

...
<CustomToolbar/>
<CustomTooltip/>

<ReactQuill
     onChange={this.handleChange}
     placeholder={this.props.placeholder}
     modules={
         toolbar: {
             container: '#my-toolbar',
             handlers: {
                  "my-link-embedder": this.embedLink,
             },
        },
     }
     formats=[
         'header',
         'bold',
         'italic',
     ]
/>

And the rest is up to you, you need to follow the instructions on https://quilljs.com/docs/api/#insertembed

On the first link I sent you there's all the customization part of the toolbar, while on the last they explain how to use the Quill editor Api.

Hope this helps ;)

It's bothersome, I know, but that's the only way I know of...

Upvotes: 0

Related Questions