Cum să obții inputul unui editor TinyMCE când îl folosești în front-end?

Acesta este codul pe care l-am adăugat în javascript, chiar înainte ca formularul să fie trimis.

// Găsește și parcurge toți editorii 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 );

    // Dacă editorul este în modul "vizual", atunci trebuie să facem ceva.
    if ( editor && container.hasClass( 'tmce-active' ) ) {
        // Salvează conținutul din editor în textarea:
        editor.save();
    }
});

Aceasta a funcționat pentru mine:

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

Unde description este ID-ul editorului tinymce iar codul după else din răspunsul acceptat, nu a funcționat în cazul meu.

Am avut nevoie de mult mai mult cod pentru a-l face să funcționeze și am primit și o eroare JavaScript: Deprecated TinyMCE API call: <target>.onKeyUp.add(..) Aceasta a fost cauzată de o actualizare WordPress de la versiunea 3.x la 4. Așa că a trebuit mai întâi să golesc cache-ul browserului.

În primul rând, am adăugat un callback la filtrul wp tiny_mce_before_init în fișierul meu functions.php, acest lucru mi-a permis să adaug o funcție de callback js care să fie declanșată când editorii sunt inițializați:

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

/**
 * Funcție de callback pentru filtru pentru a adăuga ascultători de evenimente la editorul tinymce.
 * @param  array $init Un array de funcții js de setup ca șiruri de caractere.
 * @return array       Returnează un nou array de șiruri de funcții js.
 */
function filter_cb_mce_before_init( array $init ) {
        $init['setup'] = "function(ed){
                if(get_tinymce_content)  //nu este necesar, îl folosesc ca flag pentru a verifica dacă sunt pe pagina corectă
                    ed.on('change', function(){ get_tinymce_content() });
            }";
        return $init;
    }

Apoi, funcția JavaScript pentru a face orice este dorit cu conținutul atunci când acesta se schimbă. Adăugați acest JavaScript folosind wp_enqueue_scripts la pagina dorită.

  /**
   * Obține conținutul editorului 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} Returnează conținutul
   */
  function get_tinymce_content(){

    //schimbă la numele editorului setat în 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);
}

Codul a funcționat când am folosit următoarele pentru a afișa editorul pe orice pagină:

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

Puteți obține conținutul în funcție de modul curent al editorului.

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

Tab-ul Vizual are o clasă switch-tmce pe care o puteți folosi pentru a-l identifica ca tab. Veți ști că este activat dacă are culoarea de fundal mai deschisă. Astfel, puteți folosi această informație pentru a determina care dintre cele două tab-uri este activ.

Aceasta este o soluție adaptivă bazată pe Bainternet's răspuns. Probabil că există și alte metode mai bune de a face acest lucru, dar aceasta a funcționat bine pentru mine.

De asemenea, poți folosi evenimentul addeditor:

  /// Se declanșează când un editor este adăugat în colecția EditorManager.
  tinymce.on('addeditor', function( event ) {
    var editor = event.editor;
    var $textarea = $('#' + editor.id);
    console.log($textarea.val());
  }, true );

Documentația evenimentului 'addeditor' din TinyMCE