Comment obtenir l'entrée d'un éditeur TinyMCE lors de l'utilisation sur le front-end?

Je ne sais pas pourquoi je n'ai pas pu trouver cela, mais quelqu'un sait-il comment obtenir l'entrée de l'éditeur TinyMCE? Je l'utilise dans le frontal et je veux pouvoir enregistrer tout ce que l'utilisateur a tapé dans le TinyMCE dans une base de données, mais je ne trouve pas le meilleur moyen de capturer cette valeur.

Les deux solutions que j'ai mises en place avec un certain succès sont:

1. tinyMCE.activeEditor.getContent(); - Celui-ci semble n'obtenir que la valeur de l'éditeur visuel, donc si je suis dans l'éditeur HTML et que j'apporte des modifications, puis enregistre, elles ne sont pas récupérées.

2. $('#html_text_area_id').val(); - Celui-ci est le contraire, il ne semble que récupérer la valeur de l'éditeur HTML.

Je sais qu'il y a une meilleure façon - je n'arrive pas à la trouver ...

ps Oui, je vais mettre en place des mesures de sécurité pour m'assurer que les gens ne peuvent pas faire exploser la base de données.

Ok, apparemment, WordPress garde une trace du type d'éditeur (visuel ou html) actif en tant que classe qui est ajoutée à l'encapsuleur de contenu.Voici donc une solution qui vous fournira le dernier contenu dans l'éditeur

function get_tinymce_content(){
    if (jQuery("#wp-content-wrap").hasClass("tmce-active")){
        return tinyMCE.activeEditor.getContent();
    }else{
        return jQuery('#html_text_area_id').val();
    }
}

C'est le code que j'ai ajouté à mon javascript, juste avant l'envoi du formulaire.

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

Cela a fonctionné pour moi:

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

Où description est l'ID de l'éditeur tinymce et de code après le reste de la réponse acceptée, n'a pas fonctionné pour moi.

J'avais besoin de beaucoup plus de code pour le faire fonctionner, et j'obtenais également une erreur javascript: Deprecated TinyMCE API call: <target>.onKeyUp.add(..)cela était dû à une mise à niveau de wordpress de 3.x à 4. J'ai donc dû d' clear my browser cacheabord.

Tout d'abord, j'ai ajouté un rappel au filtre wp tiny_mce_before_initdans mon fichier functions.php, cela m'a permis d'ajouter une fonction de rappel js à déclencher lorsque les éditeurs sont initialisés:

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

Ensuite, la fonction javascript pour faire ce que l'on veut avec le contenu lorsqu'il change. Ajoutez ce javascript à l'aide de wp_enqueue_scripts à la page souhaitée.

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

Le code a fonctionné lorsque j'ai utilisé ce qui suit pour imprimer l'éditeur sur n'importe quelle page:

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

Vous pouvez obtenir le contenu en fonction du mode actuel de l'éditeur.

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

L' onglet Visual possède une classe switch-tmceque vous pouvez utiliser pour l'identifier en tant qu'onglet. Vous savez qu'il a été mis au point s'il a la couleur d'arrière-plan la plus claire. Ainsi, vous pouvez également l'utiliser pour déterminer lequel des deux onglets est actif.

Il s'agit d'une solution adaptative basée sur la réponse de Bainternet . Il y a probablement d'autres meilleures façons de le faire, mais celui-ci a bien fonctionné pour moi.

Vous pouvez également utiliser l' addeditorévénement:

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

Documentation de l'événement «ajouté» de TinyMCE