How to get WP editors tinyMCE instances

Question

My main goal is to get editor content when it changes and update a live preview. For this I need to add an event listener to the editor. BTW, I have two editor in the same page and the page is loaded via ajax.

Now back to my problem. I can't get to the instance of the tinyMCE editors. I can console.log() them but get empty result when I try to stringify them.

Below is the result of console.log(tinymce.editors).

So, whenever I try to access editors using tinymce.editors.contentleft, tinymce.editors['contentleft'], tinymce.get('contentleft') or tinymce.EditorManager.get('contentleft') in all these cases I get undefined or null

Working more then couple days on this. Would appreciate a proper direction soon.

Answer 1

If you wait for the SetupEditor event then you can access the editors:

add_action( 'admin_print_footer_scripts', function () {
    ?>
    <script type="text/javascript">
    jQuery(function ($) {
        if (typeof tinymce !== 'undefined') {
            tinymce.on('SetupEditor', function (editor) {
                if (editor.id === 'contentLeft') {
                    // Could use new 'input' event instead.
                    editor.on('change keyup paste', function (event) {
                        console.log('content=%s', this.getContent());
                    });
                }
            });
        }
    });
    </script>
    <?php
} );