Como obter a entrada de um editor TinyMCE ao usar o front-end?

Ok, aparentemente o WordPress monitora que tipo de editor (visual ou html) está ativo como uma classe que é adicionada ao wrapper de conteúdo, então aqui está uma solução que te dará o conteúdo mais recente no editor

function get_tinymce_content(){
    if (jQuery("#wp-content-wrap").hasClass("tmce-active")){
        return tinyMCE.activeEditor.getContent();
    }else{
        return jQuery('#html_text_area_id').val();
    }
}

Esse é o código que adicionei ao meu javascript, logo antes do envio do formulário.

// Find and loop through all TinyMCE editors.
jQuery('#the-form').find( '.wp-editor-area' ).each(function() {
    var id = jQuery( this ).attr( 'id' ),
        sel = '#wp-' + id + '-wrap',
        container = jQuery( sel ),
        editor = tinyMCE.get( id );

    // If the editor is in "visual" mode then we need to do something.
    if ( editor && container.hasClass( 'tmce-active' ) ) {
        // Saves the contents from a editor out to the textarea:
        editor.save();
    }
});

Eu precisei de muito mais código para que funcionasse, e também estava recebendo um erro de javascript: Deprecated TinyMCE API call: <target>.onKeyUp.add(..) Isso foi causado por uma atualização do wordpress de 3.x para 4. Então tive que clear my browser cache primeiro.

Primeiramente eu adicionei um retorno de chamada ao filtro wp tiny_mce_before_init no meu arquivo functions.php, isso me permitiu adicionar uma função de retorno de chamada js a ser disparada quando os editores foram inicializados:

add_filter( 'tiny_mce_before_init', array( $obj, 'filter_cb_mce_before_init' ) );

/**
 * Filter cb to add event listeners to tinymce editor.
 * @param  array $init An array of setup js functions as strings.
 * @return array       Returns new array of js function strings.
 */
function filter_cb_mce_before_init( array $init ) {
        $init['setup'] = "function(ed){
                if(get_tinymce_content)  //not required, I use it as flag to check if on correct page
                    ed.on('change', function(){ get_tinymce_content() });
            }";
        return $init;
    }

A seguir, a função javascript para fazer o que quiser com o conteúdo quando ele for alterado. Adicione este javascript usando wp_enqueue_scripts à página desejada.

  /**
   * Get the content of the tinyMCE editor.
   * @link http://wordpress.stackexchange.com/questions/42652/how-to-get-the-input-of-a-tinymce-editor-when-using-on-the-front-end
   * @return {string} Returns the content
   */
  function get_tinymce_content(){

    //change to name of editor set in wp_editor()
    var editorID = 'my_editor_id';

    if (jQuery('#wp-'+editorID+'-wrap').hasClass("tmce-active"))
        var content = tinyMCE.get(editorID).getContent({format : 'raw'});
    else
        var content = jQuery('#'+editorID).val();

    console.log(content);
}

O código funcionou quando usei o seguinte para imprimir o editor em qualquer página:

<?php wp_editor( @$event->description, 'my_editor_id', array(
    'media_buttons' => false,
    'textarea_name' => 'data[description]',
    'quicktags'     => array("buttons"=>"link,img,close"),
) ); ?>

Você pode obter o conteúdo dependendo do modo atual do editor.

function get_tinymce_content()
    {
    if (jQuery(".switch-tmce").css('background-color')=='rgb(245, 245, 245)')
        return tinyMCE.activeEditor.getContent();
    else
        return jQuery('#html_text_area_id').val();
    }

A guia Visual tem uma classe switch-tmce que você pode usar para identificá-la como uma guia. Você saberia que ele foi focado se tiver a cor de fundo mais clara. Então, você também pode usar isso para determinar qual das duas guias está ativa.

Esta é uma solução adaptativa baseada em . stackexchange.com/questions/42652/how-to-get-the-input-of-a-tinymce-editor-when-using-on-the-front-end/42729#42729">answer . Provavelmente existem outras maneiras melhores de fazê-lo, mas esta funcionou bem para mim.

Você também pode usar addeditor event:

  /// Fires when an editor is added to the EditorManager collection.
  tinymce.on('addeditor', function( event ) {
    var editor = event.editor;
    var $textarea = $('#' + editor.id);
    console.log($textarea.val());
  }, true );

Documentação do evento 'addeditor' do TinyMCE

Isso funcionou para mim:

if (jQuery("#wp-description-wrap").hasClass("tmce-active")){
    description1 = tinyMCE.activeEditor.getContent( { format : 'html' } );
}else{
    description1 = jQuery('[name="description"]').val();

Onde descrição é o ID do editor de tinymce e de código após o else da resposta aceita, não funcionou para mim.