Dynamically change Quill placeholder

If you are using react-quill

The placeholder in the tooltip is coming from the value of the data-link attribute. So you can replace the value with your own when the component finishes mounting.

Here is the code:

componentDidMount() {
    //Replcae link in placeholder to your own text
    document.querySelector('.ql-tooltip-editor input').setAttribute("data-link", "your own placeholder");
}

Note: I am using bubble theme


The placeholder is implemented with a CSS rule:

.ql-editor::before { 
   content: attr(data-placeholder);
}

So you can do quill.root.dataset.placeholder = 'Your new placeholder';

Tags:

Quill