Come ottenere l'input dell'editor TinyMCE quando viene utilizzato nel front-end?

Questo è il codice che ho aggiunto al mio javascript, proprio prima che il form venga inviato.

// Trova e cicla attraverso tutti gli editor TinyMCE.
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 );

    // Se l'editor è in modalità "visual" allora dobbiamo fare qualcosa.
    if ( editor && container.hasClass( 'tmce-active' ) ) {
        // Salva il contenuto dall'editor nell'area di testo:
        editor.save();
    }
});

Questo ha funzionato per me:

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

Dove description è l'ID dell'editor tinymce e il codice dopo il else della risposta accettata non ha funzionato per me.

Ho avuto bisogno di molto più codice per farlo funzionare, e ricevevo anche un errore JavaScript: Deprecated TinyMCE API call: <target>.onKeyUp.add(..) Questo era causato da un aggiornamento di WordPress dalla versione 3.x alla 4. Quindi ho dovuto prima pulire la cache del browser.

Inizialmente ho aggiunto una callback al filtro wp tiny_mce_before_init nel mio file functions.php, questo mi ha permesso di aggiungere una funzione di callback js da eseguire quando gli editor vengono inizializzati:

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

/**
 * Filtro callback per aggiungere event listener all'editor tinymce.
 * @param  array $init Un array di funzioni js di setup come stringhe.
 * @return array       Restituisce un nuovo array di stringhe di funzioni js.
 */
function filter_cb_mce_before_init( array $init ) {
        $init['setup'] = "function(ed){
                if(get_tinymce_content)  //non richiesto, lo uso come flag per verificare se sono nella pagina corretta
                    ed.on('change', function(){ get_tinymce_content() });
            }";
        return $init;
    }

Poi la funzione JavaScript per fare qualsiasi cosa si voglia con il contenuto quando cambia. Aggiungi questo JavaScript usando wp_enqueue_scripts alla pagina che desideri.

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

    //cambia con il nome dell'editor impostato 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);
}

Il codice ha funzionato quando ho usato il seguente per stampare l'editor in qualsiasi pagina:

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

Puoi ottenere i contenuti in base alla modalità corrente dell'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();
    }

La scheda Visuale ha una classe switch-tmce che puoi usare per identificarla come scheda. Saprai che è stata selezionata se ha il colore di sfondo più chiaro. Quindi, puoi usare anche questo per determinare quale delle due schede è attiva.

Questa è una soluzione adattiva basata sulla risposta di Bainternet. Probabilmente ci sono altri modi migliori per farlo, ma questo ha funzionato bene per me.

Puoi anche utilizzare l'evento addeditor:

  /// Scatta quando un editor viene aggiunto alla collezione EditorManager.
  tinymce.on('addeditor', function( event ) {
    var editor = event.editor;
    var $textarea = $('#' + editor.id);
    console.log($textarea.val());
  }, true );

Documentazione dell'evento 'addeditor' di TinyMCE