Adăugarea unui editor wp_editor în textarea pentru metabox personalizat

Question

Adăugarea unui editor wp_editor în textarea pentru metabox personalizat

23 apr. 2012, 05:20:48

Vizualizări: 26.2K

Voturi: 8

Sunt începător și încerc să adaug wp_editor într-un câmp textarea al unui metabox personalizat. Am căutat peste tot un exemplu complet pentru crearea unui metabox cu textarea care să folosească wp_editor. Caut un exemplu complet, de la început până la sfârșit.

Nu doresc să folosesc un plugin.

Are cineva un link către un exemplu complet?

Mulțumesc

// Exemplu de implementare:

// Adaugă metabox
add_action('add_meta_boxes', 'adauga_editor_personalizat');
function adauga_editor_personalizat() {
    add_meta_box(
        'editor_personalizat', // ID unic
        'Editor Personalizat',  // Titlu
        'afiseaza_editor_personalizat', // Callback
        'post' // Tip post
    );
}

// Afișează editorul
function afiseaza_editor_personalizat($post) {
    $content = get_post_meta($post->ID, '_continut_personalizat', true);
    wp_editor(
        $content,
        'editor_personalizat',
        array(
            'media_buttons' => true,
            'textarea_name' => 'continut_personalizat',
            'textarea_rows' => 10
        )
    );
}

// Salvează conținutul
add_action('save_post', 'salveaza_continut_editor');
function salveaza_continut_editor($post_id) {
    if (array_key_exists('continut_personalizat', $_POST)) {
        update_post_meta(
            $post_id,
            '_continut_personalizat',
            $_POST['continut_personalizat']
        );
    }
}

Travis Pflanz

1.95K

cutie meta wp editor

Toate răspunsurile la întrebare

Comentarii

Mulțumesc pentru cod. Ai putea să explici puțin mai multe despre "locația TinyMCE în DOM este schimbată" și cum aș putea să "dezactivez TinyMCE și să activez quicktags".

Travis Pflanz

23 apr. 2012 06:30:10

Nicio problemă. Am actualizat răspunsul cu versiunea non-Tiny. De asemenea, când muți o cutie meta folosind funcția de drag and drop, aceasta este mutată în DOM. Dacă cutia meta conține o instanță de TinyMCE, poziția acelei instanțe în DOM se va schimba, ceea ce cauzează probleme. Se pare că este posibil să depășești aceste probleme, dar ar necesita o grămadă de funcționalități noi, așa că s-a decis că wp_editor (cel puțin când folosește TinyMCE) nu ar trebui folosit într-o cutie meta.

Dave Romsey

23 apr. 2012 06:59:03

Cauți un exemplu de cod de la zero, sau ai considera integrarea unui plugin personalizat pentru metabox-uri care suportă un editor WYSIWYG într-un metabox? Dacă preferi a doua variantă, pot să-ți sugerez https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress

JohnG

107

23 apr. 2012 05:53:24

Comentarii

Caut un exemplu de la zero fără un plugin. Voi actualiza întrebarea.

Travis Pflanz

23 apr. 2012 05:57:18

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

Există cel puțin o problemă la utilizarea wp_editor într-o cutie meta, așa cum este discutat în ticket #19173 (Lectură utilă pe tema wp_editor și cutiilor meta). TinyMCE devine complet haotic dacă muți cutia meta care îl conține (mai exact, dacă locația TinyMCE în DOM este schimbată). Poți, totuși, să utilizezi versiunea Quicktags (fără TinyMCE). O altă alternativă este să nu muți cutia (soluție neelegantă) sau să adaugi editorii folosind hook-urile edit_page_form sau edit_form_advanced în loc să folosești add_meta_box().

Am creat un plugin rapid pentru a demonstra problema. Este un exemplu funcțional complet de utilizare a wp_editor într-o cutie meta. Poți configura wp_editor pentru a-l face mai prietenos cu cutiile meta prin dezactivarea TinyMCE și activarea quicktags folosind argumentele potrivite.

<?php
/**
 * Plugin Name: WP Editor in a Meta Box
 * Plugin URI: 
 * Description: Demonstrație de WP Editor într-o cutie meta.
 * Version: 1.0
 * Author: goto10
 * Author URI: 
 * License: 
 */

// nume fișier: wp_editor-in-meta-box-test.php 

/* Cod cutie meta bazat pe http://codex.wordpress.org/Function_Reference/add_meta_box */

/* Definește cutia personalizată */
add_action( 'add_meta_boxes', 'myplugin_add_custom_box' );

/* Fă ceva cu datele introduse */
add_action( 'save_post', 'myplugin_save_postdata' );

/* Adaugă o cutie în coloana principală pe ecranele de editare Post și Page */
function myplugin_add_custom_box() {
  add_meta_box( 'wp_editor_test_1_box', 'Cutie Test WP Editor #1', 'wp_editor_meta_box' );
}

/* Afișează conținutul cutiei */
function wp_editor_meta_box( $post ) {

  // Folosește nonce pentru verificare
  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' );
}

/* Când postarea este salvată, salvează datele noastre personalizate */
function myplugin_save_postdata( $post_id ) {

  // verifică dacă aceasta este o salvare automată.
  // Dacă da, formularul nostru nu a fost trimis, așa că nu vrem să facem nimic
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
      return;

  // verifică dacă această acțiune vine de la ecranul nostru și cu autorizația corespunzătoare,
  // pentru că save_post poate fi declanșat în alte momente
  if ( ( isset ( $_POST['myplugin_noncename'] ) ) && ( ! wp_verify_nonce( $_POST['myplugin_noncename'], plugin_basename( __FILE__ ) ) ) )
      return;

  // Verifică permisiunile
  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, suntem autentificați: trebuie să găsim și să salvăm datele
  if ( isset ( $_POST['_wp_editor_test_1'] ) ) {
    update_post_meta( $post_id, '_wp_editor_test_1', $_POST['_wp_editor_test_1'] );
  }

}

Editare: Această versiune a funcției wp_editor_meta_box() din exemplul de mai sus, va avea TMCE dezactivat și Quicktags activat:

/* Afișează conținutul cutiei */
function wp_editor_meta_box( $post ) {

  // Folosește nonce pentru verificare
  wp_nonce_field( plugin_basename( __FILE__ ), 'myplugin_noncename' );

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

  // Setări pe care le vom trimite către wp_editor
  $args = array (
        'tinymce' => false,
        'quicktags' => true,
  );
  wp_editor( $field_value[0], '_wp_editor_test_1', $args );
}