Come ottenere l'input di un editor TinyMCE quando si utilizza sul front-end?

Non sono sicuro del motivo per cui non sono stato in grado di trovarlo, ma qualcuno sa come ottenere l'input dell'editor TinyMCE? Lo sto usando nel front-end e voglio essere in grado di salvare tutto ciò che l'utente ha digitato in TinyMCE in un database ma non riesco a trovare il modo migliore per acquisire quel valore.

Le due soluzioni che ho implementato con un certo successo sono:

1. tinyMCE.activeEditor.getContent(); - Questo sembra ottenere solo il valore dell'editor visivo, quindi se sono nell'editor HTML e apporto modifiche e poi salvo, non vengono rilevate.

2. $('#html_text_area_id').val(); - Questo è l'opposto, sembra solo ottenere il valore dell'editor HTML.

So che esiste un modo migliore - non riesco proprio a trovarlo ...

ps Sì, implementerò misure di sicurezza per assicurarmi che le persone non possano far saltare il database.

Ok, a quanto pare WordPress tiene traccia di quale tipo di editor (visual o html) è attivo come classe che viene aggiunta al wrapper del contenuto, quindi ecco una soluzione che ti porterà gli ultimi contenuti nell'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();
    }
}

Questo è il codice che ho aggiunto al mio javascript, subito prima dell'invio del modulo.

// 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();
    }
});

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 la descrizione è l'ID dell'editor di tinymce e de code dopo l' altro della risposta accettata, non ha funzionato per me.

Ho richiesto molto più codice per farlo funzionare, e ho anche riscontrato un errore javascript: Deprecated TinyMCE API call: <target>.onKeyUp.add(..)questo è stato causato da un aggiornamento di wordpress da 3.x a 4. Quindi ho dovuto clear my browser cacheprima.

In primo luogo ho aggiunto un callback al filtro wp tiny_mce_before_initnel mio file Functions.php, questo mi ha permesso di aggiungere una funzione di callback js da attivare quando gli editor sono inizializzati:

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;
    }

Successivamente la funzione JavaScript per fare ciò che è sempre desiderato con il contenuto quando cambia. Aggiungi questo javascript usando wp_enqueue_scripts alla pagina che desideri.

  /**
   * 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);
}

Il codice ha funzionato quando ho usato quanto segue per stampare l'editor su 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 Visual ha una classe switch-tmceche puoi usare per identificarla come una scheda. Sapresti che è stato messo a fuoco se ha un colore di sfondo più chiaro. Quindi, puoi anche usarlo per determinare quale delle due schede è attiva.

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

Puoi anche usare l' addeditorevento:

  /// 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 );

Documentazione dell'evento "aggiunto" di TinyMCE