CODEWITHSUNDEEP
tinymcetinymce-5
FlyFish
FlyFish

Reputation: 547

Make Specific TinyMCE TextArea ReadOnly or Design

I have a Razor page that has multiple textarea fields. Before I was using TinyMCE, I used the following Javascript to enable/disable a specific textarea based on the selection of a checkbox.

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

I've now converted the textarea to use TinyMCE. How do I target this one textarea to enable/disable it? I've already created 2 init sections where 1 targets all but the single textarea I want to change.

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

I've come across the following code but don't know how to modify it to target only the textarea I want (specifically the tinymce.activeEditor.mode.set section).

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

EDIT: Solution Based on the comment below I was able to come up with the following code which works for me:

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

Upvotes: 0

Views: 216

Answers (1)

Michael Fromin
Michael Fromin

Reputation: 13746

When you want to target a specific editor instance you can use the tinymce.get() API to target one by the ID of the underlying textarea:

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

You can also get an array of all the editors with tinymce.editors. This will provide you an array of all the instantiated editors on the page.

Upvotes: 1

Related Questions