How do I get tinyMCE editor instance by the element selector?

Question

I want to set a content of tinyMCE editor after it was created with an AJAX request. I have several editors on page. All them are initialised with:

tinymce.init({
        selector: '.tiny-mce'
    });

Each editor has a distinct class to separate it from each other. How do I use this class to set content to a one particular editor, after getting data with an AJAX request?

tinyMCE.get('.class_name') // returns null

I am searching API and SO and can't find a function to do such a simple thing.

Edit:

I found not so clean way to get the editor instance. When tinyMCE was created it added id with editor name to the element. Now I can do something like this:

var id = $('.class_name').attr('id');
tinyMCE.get(id).setContent('new content');

But is there a better way?

Answer 1

Per the get() API the string you pass to that call needs to be the ID of the editor element not a Class.

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

So if you want to target the editor based on the ID you need something like this:

<textarea class='tiny-mce' id='editor1'></textarea>
<textarea class='tiny-mce' id='editor2'></textarea>    

... and in your JavaScript something like this...

tinymce.get('editor2').setContent('...content here...');

If you only have one editor on the page you can also use

tinymce.activeEditor.setContent('...content here...');

EDIT: It depends on when in the editor's lifecycle you want to call the get() or activeEditor methods.

These won't return anything until after TinyMCE is fully initialized. If you have code like this:

<form method="post" action="dump.php">
    <textarea class='tiny-mce' id='editor1'></textarea>
    <textarea class='tiny-mce' id='editor2'></textarea>  
</form>
<script>
    tinymce.get('editor2').setContent("content here");
</script>

This will typically fail because you don't know if TinyMCE is finished initializing the textareas when your JavaScript is running. Please see this fiddle:

http://fiddle.tinymce.com/gufaab/1

The best way to load content into the editor is to use the editor's own "init" callback and place your code in there. For example:

tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    setup: function (editor) {
        editor.on('init', function () {
             this.setContent('The init function knows on which editor its called - this is for ' + editor.id);
        });
    } 
}); 

...note that the init gets called for each editor (if there are multiple) and you have access to the editor object in the DOM if needed.

Answer 2

You can use id in the selector and set content after the editor is initialized with the callback function:

tinymce.init({
        selector: 'textarea#tinymce1',
init_instance_callback : function(){
tinymce.get('tinymce1').setContent(data)
}
});

this is the html

<textarea id="tinymce1"></textarea>

use init_instance_callback because if you set the content with the ajax request it can goes faster than the initialization of the editor