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

Não sei por que não consegui encontrar isso, mas alguém sabe como obter a entrada do editor TinyMCE? Estou usando-o no front-end e quero salvar o que o usuário digitou no TinyMCE em um banco de dados, mas não consegue encontrar a melhor maneira de capturar esse valor.

As duas soluções que implementei com algum sucesso são:

1. tinyMCE.activeEditor.getContent(); - Este parece obter apenas o valor do editor visual; portanto, se eu estiver no editor de HTML e fizer alterações e depois salvar, elas não serão captadas.

2. $('#html_text_area_id').val(); - Este é o oposto, parece apenas obter o valor do editor de HTML.

Eu sei que existe uma maneira melhor - eu simplesmente não consigo encontrá-la ...

ps Sim, vou implementar medidas de segurança para garantir que as pessoas não possam explodir o banco de dados.

Ok, aparentemente, o WordPress controla 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 fornecerá 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();
    }
});

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 description é o ID do editor de tim-tim e código após o resto da resposta aceita, não funcionou para mim.

Eu precisava de muito mais código para fazê-lo funcionar, 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 eu tive que clear my browser cacheprimeiro.

Em primeiro lugar, adicionei um retorno de chamada ao filtro wp tiny_mce_before_initno meu arquivo functions.php, isso me permitiu adicionar uma função de retorno de chamada js a ser acionada quando os editores são 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;
    }

Em seguida, a função javascript faz o que for desejado com o conteúdo quando ele for alterado. Adicione esse javascript usando wp_enqueue_scripts à página que você deseja.

  /**
   * 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 possui uma classe switch-tmceque você pode usar para identificá-la como uma guia. Você saberia que ele foi focado se tiver a cor de fundo mais clara. Portanto, você também pode usá-lo para determinar qual das duas guias está ativa.

Esta é uma solução adaptativo baseado em Bainternet de resposta . Provavelmente existem outras maneiras melhores de fazer isso, mas essa funcionou bem para mim.

Você também pode usar o 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 );

Documentação de evento 'additor' do TinyMCE