Multiple tinyMCE getContent() fails

Question

I have multiple tinyMCE4 textareas on mye page, which I (all at once) initialize like this:

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector: 'textarea',
        /* ... more options ..*/
    });
</script>
<script src="js/myScript.js"></script>

In myScript.js I'd like to get the content of each one of the textareas, which look like this:

<textarea id="editor_1" data-field="1" class="editor"></textarea>
<textarea id="editor_2" data-field="2" class="editor"></textarea>
etc...

I tried this with this (on button click):

$(document).on('click','.saveStandardDoc',function(){
    $('.editor').each(function(i, obj) {
        var $that = $(this);
        console.log(tinyMCE.get($that).getContent());
    });
});

Now it gives me tinyMCE.get is not a function (does not matter if tinymce or tinyMCE )

Where am I wrong?

Answer 1

The get() method expects the passed parameter to be a String that contains the id of the <textarea> that was replaced with TinyMCE.

In your code you are passing a jQuery reference to the get() method and that won't work.

https://www.tinymce.com/docs/api/tinymce/root_tinymce/#get

A valid example would be:

tinymce.get('myEditor')

(note you don't pass a # at the beginning - its not looking for a CSS selector)