Dynamically change Quill placeholder

Question

I know that on instantiation of a Quill editor, there is a placeholder option. Is there a way that I can change this placeholder dynamically after the editor is instantiated?

Answer 1

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';

Answer 2

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