tinyMCE.editors[] wordpress 4.8 undefined

Question

I have a custom posttype with a metabox that can add posts with editors to the post. whenever I add a new post with an editor I want to save the content of that editor. It has worked fine previously but has now stopped working. I can see that there are some changes in the wordpress update 4.8 to the editor api, but I can't see how the changes affect my code.

Making the editor:

    <?php
 public function wldk_elearn_add_elements_to_metabox($subpage_id){
    $parent_id = $subpage_id;
    echo '<div id="element_data_input_text">';
    <?php
    $settings = array( 'textarea_name' => 'mycustomeditor_'.$parent_id );
    $editor_id = 'mycustomeditor_'.$parent_id;
    wp_editor( "", $editor_id, $settings );
    echo '</div>';
 }

Javascript

 function handleAddElementAction() {
    $('.wldk-elearn-add-element').click(function (event) {

        event.preventDefault();
        var $wrapper = $(this).parents('#wldk-elearn-new-element');
        var $subpage = $wrapper.find('input[name=subpage_id]');
        var $type = $wrapper.find('input:radio[name=element_type]:checked');
        var subpage = $subpage.val();
        var content = '';
        var whichmceditor = 'mycustomeditor_'+subpage;
        console.log(whichmceditor);
        if($type.val()=='tx'){

            content = tinyMCE.editors[whichmceditor].getContent();             

        }
   });

 }

Uncaught TypeError: Cannot read property 'getContent' of undefined

i have also tried

  content = tinyMCE.get(whichmceditor).getContent();

Which just gives me

Uncaught TypeError: Cannot read property 'getContent' of null

Its like tinyMCE methods don't exist anymore or something. I am not very good at this so any help or clue would be apreciated greatly.

Answer 1

So i figured it out! It was simply that the editor must be in visual mode in order to get the editor. A simple conditional fixes the issue:

function handleAddElementAction() {   
   $('.wldk-elearn-add-element').click(function (event) {

    event.preventDefault();
    var $wrapper = $(this).parents('#wldk-elearn-new-element');
    var $subpage = $wrapper.find('input[name=subpage_id]');
    var $type = $wrapper.find('input:radio[name=element_type]:checked');
    var subpage = $subpage.val();
    var content = '';
    var whichmceditor = 'mycustomeditor_'+subpage;
    console.log(whichmceditor);
    if($type.val()=='tx'){

        if($wrapper.find('#'+whichmceditor).is(':visible')){
            content = $wrapper.find('#'+whichmceditor).val();   
        }else{
            content = tinyMCE.editors[whichmceditor].getContent();             
        }           

    }
 });

}

That's 3 hours of my life wasted, Maybe the documentation could be clearer, maybe it's me, maybe it's maybeline.