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

Ok apparemment,WordPressgarde unetrace dutype d'éditeur (visuel ou html) actifen tant que classe quiest ajoutée au wrapper de contenu,voici donc une solution qui vouspermettra 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();
    }
}
 

Ok apparently WordPress keeps track of what kind of editor (visual or html) is active as a class which is added to the content wrapper so here is a solution that will get you the latest content in the 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();
    }
}

C'est le code quej'ai ajouté àmonjavascript,juste avant l'envoi duformulaire.

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

That's the code I added to my javascript, right before the form is submitted.

// 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 afonctionnépourmoi:

 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'éditeurtinymceet le code après le else de la réponse acceptée,n'apasfonctionnépourmoi.

This worked for me:

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

Where description is the ID of the tinymce editor and de code after the else of the accepted answer, did not work for me.

J'avaisbesoin debeaucoupplus de codepour lefairefonctionner,et j'obtenais également uneerreurjavascript: Deprecated TinyMCE API call: <target>.onKeyUp.add(..) Cela était dû à unemise àjour wordpress de 3.x à 4. J'ai donc dû d'abord clear my browser cache.

J'ai d'abord ajouté un callback aufiltre wp tiny_mce_before_init dansmonfichierfunctions.php,celam'apermis d'ajouter unefonction de callbackjs à déclencher lorsque les éditeurs sontinitialisé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,lafonctionjavascriptpourfaire ce que l'on veut avec le contenu quandil change. Ajoutez cejavascript à l'aide de wp_enqueue_scripts à lapage 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 afonctionné lorsquej'ai utilisé ce qui suitpourimprimer l'éditeur surn'importe quellepage:

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

I required a lot more code to get it working, and also was getting a javascript error: Deprecated TinyMCE API call: <target>.onKeyUp.add(..) This was caused by a wordpress upgrade from 3.x to 4. So I had to clear my browser cache first.

Firstly I added a callback to teh wp filter tiny_mce_before_init in my functions.php file, this allowed to me to add a js callback function to be fired when the editors are initialised:

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

Next the javascript function to do what ever is wanted with the content when it changes. Add this javascript using wp_enqueue_scripts to the page you want.

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

The code worked when I used the following to print the editor to any page:

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

Vouspouvez obtenir le contenuen fonction dumode 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 Visuel a une classe switch-tmce que vouspouvez utiliserpour l'identifieren tant qu'onglet.Vous saurez qu'il a étémis aupoint s'il a la couleur d'arrière-planplus claire.Ainsi,vouspouvez également l'utiliserpour déterminer lequel des deux ongletsest actif.

Il s'agit d'une solution adaptativebasée sur Bainternet answer .Il y aprobablement d'autresmeilleuresfaçons de lefaire,mais celle-ci abien fonctionnépourmoi.

You can get the contents depending on the current mode of the 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();
    }

The Visual tab has a class switch-tmce which you can use for identifying it as a tab. You would know that it has been focused if it is having the lighter background color. So, you can also use that to determine which of the two tabs is active.

This is an adaptive solution based on Bainternet's answer. There are probably other better ways to do it but this one worked well for me.

Vouspouvez é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 sur l'événement "addeditor" TinyMCE

You can also use addeditor event :

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

TinyMCE 'addeditor' event documentation