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

8

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.

Sam
la source
2
Lorsque vous lancez tinyMCE, vous le liez généralement à une zone de texte, utilisez simplement l'identifiant de cette zone de texte avec jQueryval()
Bainternet
Oui, j'ai essayé mais ça n'obtient que la valeur de l'éditeur html. Si je suis dans l'éditeur visuel, apportez des modifications, puis essayez d'enregistrer, toutes les modifications que j'ai apportées dans l'éditeur visuel ne sont pas enregistrées.
Sam

Réponses:

22

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();
    }
}
Bainternet
la source
Hmm, idée intéressante. Je vais tester cela et faire rapport. Merci!
Sam
1
Fonctionne parfaitement. Merci de votre aide! Si j'avais assez de réputation, je voterais pour.
Sam
Heureux que cela ait fonctionné pour vous, et vous pouvez accepter la réponse comme une bonne réponse qui fera très bien l'affaire :)
Bainternet
2
Il a fallu beaucoup de temps pour trouver une réponse à cela. J'avais également besoin d'un moyen de définir le contenu. Dans le cas où quelqu'un d'autre aurait également besoin d'un moyen de définir le contenu, voici un résumé des deux fonctions (get / set): gist.github.com/RadGH/523bed274f307830752c . Cela fonctionne également avec les identifiants wp_editor personnalisés, pas seulement par défaut.
Radley Sustaire
Beaucoup d'aide pour moi aussi;)
Vignesh Pichamani
1

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();
    }
});
Philipp
la source
1

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

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.

Alfredo Cebrián
la source
Veuillez expliquer en quoi est-ce différent de la réponse acceptée? Quelles nouvelles informations. fournissez-vous?
Fayaz
0

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"),
) ); ?>
Daithí
la source
0

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.

Abel Melquiades Callejo
la source
0

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

Camille Descombes
la source