web-dev-qa-db-fra.com

Comment obtenir la contribution d'un éditeur TinyMCE lors de l'utilisation en front-end?

Je ne sais pas pourquoi je n'ai pas réussi à trouver cela, mais est-ce que quelqu'un sait comment obtenir les informations de l'éditeur TinyMCE? Je l'utilise en amont et souhaite pouvoir sauvegarder tout ce que l'utilisateur a saisi dans TinyMCE dans une base de données, mais ne trouve pas le meilleur moyen de capturer cette valeur.

Les deux solutions que j'ai implémentées avec un certain succès sont:

  1. tinyMCE.activeEditor.getContent(); - Celui-ci semble ne recevoir que la valeur de l'éditeur visuel. Par conséquent, si je suis dans l'éditeur HTML et que je modifie puis enregistre, ils ne sont pas pris en compte.

  2. $('#html_text_area_id').val(); - Celui-ci est l'inverse, il semble seulement obtenir la valeur de l'éditeur HTML.

Je sais qu'il existe un meilleur moyen - je n'arrive pas à le trouver ...

p.s Oui, je vais mettre en place des mesures de sécurité pour que les gens ne puissent pas faire exploser la base de données.

tinymcewp-editor
8
Sam

Ok, apparemment, WordPress garde la trace du type d’éditeur (visuel ou html) actif en tant que classe ajoutée au wrapper de contenu. Voici donc une solution qui vous permettra d’obtenir 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();
    }
}
22
Bainternet

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

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

  /// 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 'additor' de TinyMCE

0
Camille Descombes

Il me fallait beaucoup plus de code pour que cela fonctionne, et j'avais également une erreur javascript: Deprecated TinyMCE API call: <target>.onKeyUp.add(..) Ceci était dû à une mise à niveau WordPress de 3.x à 4. Donc, je devais d'abord clear my browser cache.

Premièrement, j'ai ajouté un rappel au filtre wp tiny_mce_before_init dans mon fichier functions.php, ce qui 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 vous permet de faire ce que vous voulez avec le contenu lorsqu'il change. Ajoutez ce javascript en utilisant wp_enqueue_scripts à la page de votre choix.

  /**
   * 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 fonctionnait lorsque j’utilisais 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"),
) ); ?>
0
Daithí

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 de tinymce et le code après le else de la réponse acceptée, n'ont pas fonctionné pour moi.

0
Alfredo Cebrián

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

Le Visual tab a une classe switch-tmce que vous pouvez utiliser pour l'identifier en tant que tabulation. Vous sauriez qu'il a été ciblé si la couleur d'arrière-plan est plus claire. Donc, vous pouvez également l'utiliser pour déterminer lequel des deux onglets est actif.

Ceci est une solution adaptative basée sur Bainternet 's answer . Il y a probablement d'autres façons de le faire, mais celle-ci a bien fonctionné pour moi.

0
Abel Melquiades Callejo