WordPress : Utilisation de wp_editor() dans la méta-boîte personnalisée

Je construis une méta-boîte personnalisée avec une entrée d’éditeur classique plutôt qu’une simple entrée. La raison de l’utilisation de wp_editor est que je voulais ajouter des paragraphes de texte à l’intérieur de div mais la simple entrée échappait au html. Maintenant, j’utilise cette fonction. Maintenant, le problème est que lorsque je produis les données de cette entrée d’éditeur, cela échappe au html. Voici le code que j’utilise pour la sortie.

echo get_post_meta($post_id, ‘skyscraper_post’, true );

J’utilise ce code pour ajouter des méta-boîtes.

add_action( 'add_meta_boxes_post', function ( $post ) {
    if ( $post->_wp_page_template === 'page-templates/skyscraper-post.php' ) {
        add_meta_box( 'sky_post_excerpt', 'SkyScraper Post Excerpt and Links', 'sky_post_excerpts', 'post', 'advanced', 'high' );
    }
});
function sky_post_excerpts() {
     global $post;
    $values = get_post_custom( $post->ID );
    $data = get_post_meta($post->ID, 'skyscraper_post', true);


    $strong_title = isset( $values['skyscraper_strong'] ) ? esc_html( $values['skyscraper_strong'][0] ) : "";
    $title = isset( $values['skyscraper_post_title'] ) ? esc_attr( $values['skyscraper_post_title'][0] ) : "";
    $text = isset( $values['skyscraper_post'] ) ?  $values['skyscraper_post'][0]  : "";
    $image = isset( $values['skyscraper_post_image'] ) ? esc_attr( $values['skyscraper_post_image'][0] ) : "";

    // We'll use this nonce field later on when saving.
    wp_nonce_field( 'my_post_meta_box_nonce', 'post_meta_box_nonce' );
    ?>

    <table class="form-table">
        <tbody>
        <tr valign="top">
            <th scope="row">
                <label><strong>Skyscraper Title</strong></label>
            </th>
            <td>
                <p><input class="widefat" name="skyscraper_strong" id="skyscraper_strong" ><?php echo $strong_title; ?></input>
                </p>
                <p><input class="widefat" rows="4" name="skyscraper_post_title" id="skyscraper_post_title" value="<?php echo $title; ?>"/>
                </p>
            </td>
        </tr>

        <tr valign="top">
            <th scope="row">
                <label for="skyscraper_post"><strong>Skyscraper Page Excerpt</strong></label>
            </th>
            <td>
                <?php wp_editor( $data, 'post_meta_box', $settings = array('textarea_name'=>'skyscraper_post')); ?>
                </p>
            </td>
        </tr>
        <tr valign="top">
            <th scope="row">
                <label for="skyscraper_image"><strong>SVG Image Link</strong></label>
            </th>
            <td>
                <p><input class="widefat" rows="4" name="skyscraper_post_image" id="skyscraper_post_image" value="<?php echo $image; ?>"/>
                </p>
            </td>
        </tr>

        </tbody>
    </table>
    <?php
}

Pour enregistrer les données, j’utilise ce code.

    add_action( 'save_post', 'post_meta_box_save' );
    function post_meta_box_save( $post_id ) {
   // Bail if we're doing an auto save
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

    // if our nonce isn't there, or we can't verify it, bail
    if( !isset( $_POST['post_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['post_meta_box_nonce'], 'my_post_meta_box_nonce' ) ) return;

    // if our current user can't edit this post, bail
    if( !current_user_can( 'edit_post' ) ) return;
    //$allowed = wp_kses_allowed_html();
    $allowed= array(
        'p' => array(
            'class' => array(),
            'id' => array(),
        ),
        'strong' => array(),
    );


    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_post'] ) )
        update_post_meta( $post_id, 'skyscraper_post', wp_kses( $_POST['skyscraper_post'], $allowed ) );

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_post_image'] ) )
        update_post_meta( $post_id, 'skyscraper_post_image', wp_kses( $_POST['skyscraper_post_image'], $allowed ) );

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_strong'] ) )
        update_post_meta( $post_id, 'skyscraper_strong', wp_kses( $_POST['skyscraper_strong'], $allowed ) );

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_post_title'] ) )
        update_post_meta( $post_id, 'skyscraper_post_title', wp_kses( 

    $_POST['skyscraper_post_title'], $allowed ) );
    }

Je ne sais pas pourquoi le html est échappé. Toute aide sera appréciée, merci.

voici la sortie échappée.

Solution n°1 trouvée

Cela ne résoudra peut-être pas le problème, mais j’espère que cela vous aidera.

1. Dans la sky_post_excerpts()fonction, j’ai utilisé ceci pour afficher l’éditeur TinyMCE/classic : (the $datais get_post_meta($post->ID, 'skyscraper_post', true))

   <?php wp_editor( $data, 'post_meta_box', array('textarea_name'=>'skyscraper_post')); ?>
   

2. Dans la post_meta_box_save()fonction, j’ai enregistré la méta comme ceci, où $allowedest wp_kses_allowed_html():

   update_post_meta( $post_id, 'skyscraper_post', wp_kses( $_POST['skyscraper_post'], $allowed ) );
   

3. Sur le front-end, j’affiche les métadonnées comme suit :

   // This is really just an example. And I was on a single post.
   echo get_post_meta( get_the_ID(), 'skyscraper_post', true );
   

Et tout a bien fonctionné pour moi – tout le HTML est resté tel que généré par l’éditeur TinyMCE.

METTRE À JOUR

si j’utilise du visuel et non du texte dans TinyMCE, les balises p ne s’affichent pas

wp_kses_allowed_html()lorsqu’il est appelé sans spécifier le $contextparamètre, utilisera la variable globale $allowedtagsqui est un tableau d’éléments HTML autorisés par KSES, qui (par défaut) n’incluent pas de balisesp /éléments.

Si vous souhaitez autoriser pdes éléments, vous pouvez :

• Utilisez wp_kses_allowed_html( 'post' )qui utilisera la variable globale $allowedposttagsqui contient également un tableau similaire à la $allowedtagsvariable, mais $allowedposttagsqui a de nombreux éléments autorisés, y compris tableet video.

• Ou activez manuellement les péléments :

  $allowed = wp_kses_allowed_html();
  $allowed['p'] = array(); // allows all attributes!
  

• Comme ci-dessus, mais créez vos propres balises autorisées :

  $allowed = array();
  $allowed['p'] = array(); // allows all attributes!
  

Mais, vous ne devriez pas autoriser tous les attributs.. donc :

$allowed['p'] = array(
  'class' => true,
  'id'    => true,
  ...other attributes...
);