Get TinyMCE instance by class

Question

I have a form with multiple TinyMCE instance. I created the TextArea controls dynamically using a Repeater control - They all have the same ID,but I gave each one a different class. I assigned each of the TextArea controls a TinyMCE instance using the editor_selector : option in the TinyMCE Init function.

tinyMCE.init({ mode : 'textareas',theme : 'simple',editor_selector : 'upperBlock',directionality : 'rtl'});  tinyMCE.init({ mode : 'textareas',theme : 'simple',editor_selector : 'middleBlock',directionality : 'rtl'});

I want to refer to a specific TinyMCE instance in a JS function and get its content. In the case when each TextArea control has a different id that could by done by using :

tinyMCE.get('IdOfYourTextBoxWithTheTinyMCEContent').getContent()

Is there a way to get ref to a specific TinyMCE instance content by the class assigned to it in the editor_selector option of the TinyMCE Init function ?

Thanks

Answer 1

This can't be done with native TinyMCE methods. You have to loop for yourself, like eg (untested)

for (edId in tinymce.editors) {
        if (tinymce.editors[edId].settings.editor_selector == 'upperBlock') {
        // editor found - do something
    }
}

Answer 2

You are doing it wrong. It is not allowed in HTML to have more elements with the same ID. Give them the same class and diffirent IDs.

Answer 3

If you want to retrieve the editor by class, you have to set this properties first to the editor.

tinymceOptions: {
                  mode: 'specific_textareas',
                  editor_selector: "yourClassName"
                }

then, your textarea would be like:

<textarea class="yourClassName"></textarea>

and then, you can iterate between all the editors you have like

    tinymce.editors.forEach(function(editor) {
        if (editor.settings.editor_selector === 'yourClassName') {
        // do what you want!
    }
});