How to trigger on class instead if id in tinymce.get()

Question

For counting the characters in a tinyMCE textarea, I use this code:

<textarea id="txtTinyMCE" rows="2" cols="20"></textarea>
    
<div id="character_count"></div>

<input type="submit" value="Submit" onclick="return ValidateCharacterLength();" />

window.onload = function () {
     tinymce.init({
          selector: 'textarea',
          width: 400,
          setup: function (ed) {
              ed.on('keyup', function (e) {
                  var count = CountCharacters();
                  document.getElementById("character_count").innerHTML = "Characters: " + count;
              });
          }
     });
}

function CountCharacters() {
    var body = tinymce.get("txtTinyMCE").getBody();
    var content = tinymce.trim(body.innerText || body.textContent);
    return content.length;
};
function ValidateCharacterLength() {
    var max = 20;
    var count = CountCharacters();
    if (count > max) {
        alert("Maximum " + max + " characters allowed.")
        return false;
    }
    return;
}

The problem: I have multiple textareas, so I can not use id in the textarea. I use a class name:

<textarea class="tinymce" rows="2" cols="20"></textarea>

Now the problem is this line:

var body = tinymce.get("txtTinyMCE").getBody(); // txtTinyMCE is id

How can I trigger on the classname with tinymce.get() instead if id ?

Answer 1

Trigger on the activeEditor instead.

<textarea class="whatever" rows="2" cols="20"></textarea>

Now change your line

var body = tinymce.get("txtTinyMCE").getBody();

to

var body = tinymce.activeEditor.getBody();