¿Cómo obtener la entrada de un editor TinyMCE cuando se usa en el front-end?

No estoy seguro de por qué no he podido encontrar esto, pero ¿alguien sabe cómo obtener la entrada del editor de TinyMCE? Lo estoy usando en el front-end y quiero poder guardar lo que el usuario haya escrito en el TinyMCE en una base de datos, pero no puedo encontrar la mejor manera de capturar ese valor.

Las dos soluciones que he implementado con cierto éxito son:

1. tinyMCE.activeEditor.getContent(); - Parece que este solo obtiene el valor del editor visual, por lo que si estoy en el editor HTML y hago cambios y luego los guardo, no se recogen.

2. $('#html_text_area_id').val(); - Este es lo contrario, solo parece obtener el valor del editor HTML.

Sé que hay una mejor manera, parece que no puedo encontrarla ...

ps Sí, voy a implementar medidas de seguridad para asegurarme de que las personas no puedan hacer explotar la base de datos.

Ok, aparentemente WordPress realiza un seguimiento de qué tipo de editor (visual o html) está activo como una clase que se agrega al contenedor de contenido, así que aquí hay una solución que le proporcionará el contenido más reciente en el 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();
    }
}

Ese es el código que agregué a mi javascript, justo antes de enviar el formulario.

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

Esto funcionó para mí:

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

Donde la descripción es el ID del editor de tinymce y el código después de lo demás de la respuesta aceptada, no funcionó para mí.

Necesitaba mucho más código para que funcionara, y también recibía un error de JavaScript: Deprecated TinyMCE API call: <target>.onKeyUp.add(..)esto fue causado por una actualización de WordPress de 3.xa 4. Entonces tuve que hacerlo clear my browser cacheprimero.

En primer lugar, agregué una devolución de llamada al filtro wp tiny_mce_before_initen mi archivo functions.php, esto me permitió agregar una función de devolución de llamada js para que se active cuando se inicializan los editores:

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 continuación, la función de JavaScript para hacer lo que quiera con el contenido cuando cambie. Agregue este javascript usando wp_enqueue_scripts a la página que desee.

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

El código funcionó cuando usé lo siguiente para imprimir el editor en cualquier página:

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

Puede obtener el contenido según el modo actual del 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 pestaña Visual tiene una clase switch-tmceque puede usar para identificarla como una pestaña. Sabrá que se ha enfocado si tiene el color de fondo más claro. Por lo tanto, también puede usar eso para determinar cuál de las dos pestañas está activa.

Esta es una solución adaptativa basada en la respuesta de Bainternet . Probablemente hay otras formas mejores de hacerlo, pero esta funcionó bien para mí.

También puede usar 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 );

Documentación del evento 'additor' de TinyMCE