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

Question

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?

score 2 · Answer 1 · answered Feb 25 '22 at 16:12

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.

This would set the placeholder even when there is contents inside the editor. If you remove the contents then it reverts to the initial placeholder — Bhavana67, May 13 '22 at 08:20

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

1 Answers1