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?

score 19 · Accepted Answer · answered Aug 13 '16 at 20:54

19

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

answered Aug 13 '16 at 20:54

jhchen

14,355
14
63
91

3

For other people who see this, can you specify what `quill` is referring to in `quill.root.dataset.placeholder`? It took me a moment to realize that was my editor instance, since I did not name it `quill`. – lastmjs Aug 13 '16 at 23:45
this is the correct answer, thanks a ton, saved me a lot of headache – Josh O'Connor Nov 09 '17 at 19:37
I need to do this same requirement using Angular 8. Can anyone please point me to certain blog to understand on how I can do this! I'm not clear yet with Quill Editor, still understanding. – Ashok kumar Dec 11 '20 at 04:50

score 1 · Answer 2 · edited Nov 02 '19 at 09:48

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

Dynamically change Quill placeholder

2 Answers2

Linked