Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamically change Quill placeholder

Tags:

quill

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?

like image 912
lastmjs Avatar asked Aug 13 '16 20:08

lastmjs


2 Answers

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

like image 113
jhchen Avatar answered Nov 11 '22 08:11

jhchen


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

like image 22
iShubhamPrakash Avatar answered Nov 11 '22 07:11

iShubhamPrakash