如何在 TinyMCE 5 中动态更改占位符文本？

Question

我正在使用 TinyMCE 5.6.2。我有一个与 TinyMCE 绑定的文本区域。占位符文本需要根据下拉列表的选择进行更改。我知道我可以用静态值初始化它：

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

但是我需要根据下拉列表的选择来更改它（以下内容基于我尝试将文本区域转换为 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.';
 }

我已经尝试过以下方法，但都不起作用：

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

这是：

 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....
 }

这是我要定位的文本区域：

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

有没有办法动态更改 TinyMCE 文本区域的占位符文本？如果是这样，怎么办？

Answer 1

TinyMCE 并不正式支持在加载编辑器后修改占位符文本的功能。

如果您检查 TinyMCE 出现的 DOM，您将看到 TinyMCE 内的 标记上有一个名为 data- 的属性。 mce-占位符。您可以使用 JavaScript 修改该属性，这将导致占位符文本更新。这是一个运行示例：

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

关键行是：

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

请注意，这依赖于 TinyMCE 将自身注入页面的当前方式以及它处理占位符的方式。如果 TinyMCE 将来要改变这一点，这可能会破坏这个解决方法，但对于 TinyMCE 5.x 来说，这应该适用于所有版本。