Aggiungere wp_editor a un textarea in un metabox personalizzato

Question

Aggiungere wp_editor a un textarea in un metabox personalizzato

23 apr 2012, 05:20:48

Visualizzazioni: 26.2K

Voti: 8

Sono un principiante e sto cercando di aggiungere wp_editor a un campo textarea in un metabox personalizzato. Ho cercato praticamente ovunque un esempio completo su come creare un metabox con un textarea che utilizzi wp_editor. Sto cercando un esempio completo dall'inizio alla fine.

Non voglio utilizzare un plugin.

Qualcuno ha un link a un esempio completo?

Grazie

// Aggiungi il metabox
add_action('add_meta_boxes', 'aggiungi_editor_metabox');
function aggiungi_editor_metabox() {
    add_meta_box(
        'editor_metabox', // ID univoco
        'Editor Personalizzato', // Titolo del metabox
        'mostra_editor_metabox', // Callback function
        'post' // Tipo di post 
    );
}

// Callback per mostrare il contenuto del metabox
function mostra_editor_metabox($post) {
    // Recupera il valore salvato
    $content = get_post_meta($post->ID, '_editor_metabox_key', true);
    
    // Impostazioni dell'editor
    $editor_id = 'editor_metabox_content';
    $settings = array(
        'textarea_name' => '_editor_metabox_key',
        'textarea_rows' => 10,
        'media_buttons' => true
    );
    
    // Output dell'editor
    wp_editor($content, $editor_id, $settings);
}

// Salva i dati del metabox
add_action('save_post', 'salva_editor_metabox');
function salva_editor_metabox($post_id) {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) 
        return;
        
    if (isset($_POST['_editor_metabox_key'])) {
        update_post_meta(
            $post_id,
            '_editor_metabox_key',
            wp_kses_post($_POST['_editor_metabox_key'])
        );
    }
}

Travis Pflanz

1.95K

metabox wp editor

Tutte le risposte alla domanda

Commenti

Grazie per il codice. Potresti spiegarmi un po' di più "la posizione di TinyMCE nel DOM viene cambiata" e come dovrei procedere per "disabilitare TinyMCE e abilitare quicktags".

Travis Pflanz

23 apr 2012 06:30:10

Nessun problema. Ho aggiornato la risposta con la versione non Tiny. Inoltre, quando sposti un meta box usando la funzione di drag and drop, questo viene spostato nel DOM. Se il meta box contiene un'istanza di TinyMCE, la posizione di quell'istanza nel DOM sarà cambiata, il che causa problemi. A quanto pare è possibile superare questi problemi, ma richiederebbe un sacco di nuove funzionalità, quindi si è deciso che wp_editor (almeno quando usa TinyMCE) non dovrebbe essere usato in un meta box.

Dave Romsey

23 apr 2012 06:59:03

Stai cercando un esempio di codice da zero, oppure valuteresti l'integrazione di un plugin personalizzato per metabox che supporti un editor WYSIWYG in un metabox? Se opti per la seconda opzione, potrei suggerirti https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress

JohnG

107

23 apr 2012 05:53:24

Commenti

Sto cercando un esempio da zero senza un plugin. Aggiornerò la domanda.

Travis Pflanz

23 apr 2012 05:57:18

Dave Romsey 17.9K · Accepted Answer · 2012-04-23T06:06:14Z

C'è almeno un problema nell'utilizzare wp_editor in una meta box, come discusso nel ticket #19173 (lettura interessante sull'argomento di wp_editor e meta box). TinyMCE si comporta in modo anomalo se si sposta la meta box che lo contiene (specificamente, se la posizione di TinyMCE nel DOM viene modificata). Puoi tuttavia utilizzare la versione Quicktags (senza TinyMCE). Un'altra alternativa è semplicemente non spostare la box (soluzione poco elegante) o aggiungere gli editor utilizzando gli hook edit_page_form o edit_form_advanced invece di usare add_meta_box().

Ho scritto un plugin rapido per dimostrare il problema. È comunque un esempio completamente funzionante di utilizzo di wp_editor in una meta box. Puoi configurare wp_editor per renderlo più adatto alle meta box disabilitando TinyMCE e abilitando quicktags utilizzando i parametri appropriati.

<?php
/**
 * Plugin Name: WP Editor in a Meta Box
 * Plugin URI: 
 * Description: Dimostrazione di WP Editor in una meta box.
 * Version: 1.0
 * Author: goto10
 * Author URI: 
 * License: 
 */

// nome file: wp_editor-in-meta-box-test.php 

/* Codice della meta box basato su http://codex.wordpress.org/Function_Reference/add_meta_box */

/* Definisce la custom box */
add_action( 'add_meta_boxes', 'myplugin_add_custom_box' );

/* Fa qualcosa con i dati inseriti */
add_action( 'save_post', 'myplugin_save_postdata' );

/* Aggiunge una box nella colonna principale nelle schermate di modifica di Post e Pagine */
function myplugin_add_custom_box() {
  add_meta_box( 'wp_editor_test_1_box', 'WP Editor Test #1 Box', 'wp_editor_meta_box' );
}

/* Stampa il contenuto della box */
function wp_editor_meta_box( $post ) {

  // Usa nonce per la verifica
  wp_nonce_field( plugin_basename( __FILE__ ), 'myplugin_noncename' );

  $field_value = get_post_meta( $post->ID, '_wp_editor_test_1', false );
  wp_editor( $field_value[0], '_wp_editor_test_1' );
}

/* Quando il post viene salvato, salva i nostri dati personalizzati */
function myplugin_save_postdata( $post_id ) {

  // verifica se si tratta di un salvataggio automatico
  // In tal caso il nostro form non è stato inviato, quindi non vogliamo fare nulla
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
      return;

  // verifica che provenga dalla nostra schermata e con autorizzazione corretta,
  // perché save_post può essere attivato in altri momenti
  if ( ( isset ( $_POST['myplugin_noncename'] ) ) && ( ! wp_verify_nonce( $_POST['myplugin_noncename'], plugin_basename( __FILE__ ) ) ) )
      return;

  // Controlla i permessi
  if ( ( isset ( $_POST['post_type'] ) ) && ( 'page' == $_POST['post_type'] )  ) {
    if ( ! current_user_can( 'edit_page', $post_id ) ) {
      return;
    }    
  }
  else {
    if ( ! current_user_can( 'edit_post', $post_id ) ) {
      return;
    }
  }

  // OK, siamo autenticati: dobbiamo trovare e salvare i dati
  if ( isset ( $_POST['_wp_editor_test_1'] ) ) {
    update_post_meta( $post_id, '_wp_editor_test_1', $_POST['_wp_editor_test_1'] );
  }

}

Modifica: Questa versione della funzione wp_editor_meta_box() dell'esempio precedente avrà TinyMCE disabilitato e Quicktags abilitato:

/* Stampa il contenuto della box */
function wp_editor_meta_box( $post ) {

  // Usa nonce per la verifica
  wp_nonce_field( plugin_basename( __FILE__ ), 'myplugin_noncename' );

  $field_value = get_post_meta( $post->ID, '_wp_editor_test_1', false );

  // Impostazioni che passeremo a wp_editor
  $args = array (
        'tinymce' => false,
        'quicktags' => true,
  );
  wp_editor( $field_value[0], '_wp_editor_test_1', $args );
}