使特定的 TinyMCE TextArea 只读或设计

Question

我有一个包含多个 textarea 字段的 Razor 页面。在我使用 TinyMCE 之前，我使用以下 Javascript 根据复选框的选择启用/禁用特定的textarea。

 if ('@Model.IssueData.rootCauseIdentified' == "true") {
      document.getElementById("rootcause").disabled = false;
      document.getElementById("rootcause").style.backgroundColor = "white";
 } else {
      document.getElementById("rootcause").style.backgroundColor = "lightgray";
 }

我现在已将 textarea 转换为使用 TinyMCE。我如何定位这个textarea 来启用/禁用它？我已经创建了 2 个 init 部分，其中 1 个针对除我想要更改的单个 textarea 之外的所有部分。

tinymce.init({
    selector: '.tinymce1',
    menubar: false,
    plugins: [
        'advlist autolink lists link charmap',
        'searchreplace',
        'insertdatetime table paste wordcount'
    ],
    toolbar: 'undo redo | ' +
        'bold italic underline forecolor backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent |link charmap ' +
        'removeformat'
});
tinymce.init({
    selector: '.toenabledisable',
    menubar: false,
    plugins: [
        'advlist autolink lists link charmap',
        'searchreplace',
        'insertdatetime table paste wordcount'
    ],
    toolbar: 'undo redo | ' +
        'bold italic underline forecolor backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent |link charmap ' +
        'removeformat'
});

我遇到了以下代码，但不知道如何修改它以仅针对我想要的 textarea（特别是 tinymce.activeEditor.mode.set 部分）。

function toggleEditorMode(mode) {
if (mode) {
  tinymce.activeEditor.mode.set("design");
} else {
  tinymce.activeEditor.mode.set("readonly");
}

编辑：解决方案 根据下面的评论，我能够提出以下适用于我的代码：

if (elementid == "rootcause") {              
    if (element.checked) {
        tinymce.get('rootcause').mode.set("design");
    } else {                   
        tinymce.get('rootcause').mode.set("readonly");
    }
}

Answer 1

当你想定位一个特定的编辑器实例时，你可以使用tinymce.get() API 通过底层文本区域的ID来定位一个：

https://www.tiny.cloud/docs/api/tinymce/root_tinymce/#get

您还可以使用tinymce.editors 获取所有编辑器的数组。这将为您提供页面上所有实例化编辑器的数组。