CODEWITHSUNDEEP
tinymcetinymce-5
FlyFish
FlyFish

Reputation: 547

How Do You Change the Placeholder Text Dynamically in TinyMCE 5?

I'm using TinyMCE 5.6.2. I have a single textarea tied to TinyMCE. The placeholder text needs to change dependent upon the selection of a dropdown. I know I can initialize it with a static value:

 tinymce.init({
   selector: '.tinymce',
   placeholder: "Please enter the complete date.",

However I need to change it based on the selection of a dropdown (the following was based on what I was doing before I tried to convert the textarea to TinyMCE).

 if (reportingStatusId == "1") {
    document.getElementById('notes').placeholder = 'Please enter why not started and estimated start month.';
 } else if (reportingStatusId == "2") {
    document.getElementById('notes').placeholder = 'Please enter why not applicable.';
 } else if (reportingStatusId == "3") {
    document.getElementById('notes').placeholder = 'Please enter why not reported.';
 }

I've tried the following but neither works:

 if (reportingStatusId == "1") {
    tinyMCE.get('notes').placeholder = 'Please enter why not started and estimated start month.';
 } else if (reportingStatusId == "2") {
    tinyMCE.get('notes').placeholder = 'Please enter why not applicable';
 } else if (reportingStatusId == "3") {
    tinyMCE.get('notes').placeholder = 'Please enter why not reported';
 }

and this:

 if (reportingStatusId == "1") {
    tinymce.init({
       selector: ".tinymce",
       placeholder: "Please enter why not started and estimated start month.",
    });
 } else if (reportingStatusId == "2") {
    etc.....
 } else if (reportingStatusId == "3") {
    etc....
 }

Here is the textarea I am targeting:

 <textarea id="notes" class="form-control statusfield tinymce" rows="3" style="background-color:white" asp-for="Model[0].notes" >@Model.Model[0].notes</textarea>

Is there a way to change the placeholder text of a TinyMCE textarea dynamically? If so, how?

Upvotes: 1

Views: 1653

Answers (1)

Michael Fromin
Michael Fromin

Reputation: 13744

TinyMCE does not officially support the ability to modify the placeholder text once the editor is loaded.

If you inspect the DOM where TinyMCE appears you will see that there is an attribute on the <body> tag within the TinyMCE <iframe> called data-mce-placeholder. You can modify that attribute using JavaScript and that will cause the placeholder text to update. Here is a running example:

https://fiddle.tiny.cloud/6Xhaab

The key line is:

tinymce.activeEditor.getBody().setAttribute('data-mce-placeholder', 'This is NEW placeholder text');

Please note that this relies on the current way TinyMCE injects itself into the page and how it handles the placeholder. If TinyMCE were to change that in the future this would potentially break this workaround but for TinyMCE 5.x this should work across all versions.

Upvotes: 2

Related Questions