Metabox personalizado con wp_editor para área de texto

23 abr 2012, 05:20:48
Vistas: 26.2K
Votos: 8

Soy principiante y busco agregar wp_editor a un campo de área de texto en un metabox personalizado. He buscado por todas partes un ejemplo completo sobre cómo escribir un metabox con un área de texto que use wp_editor. Estoy buscando un ejemplo completo de principio a fin.

No quiero usar un plugin.

¿Alguien tiene un enlace a un ejemplo completo?

Gracias

0
Todas las respuestas a la pregunta 2
2
17

Existe al menos 1 problema al usar wp_editor en una meta caja, como se discute en ticket #19173 (Buena lectura sobre el tema de wp_editor y meta cajas). TinyMCE se desconfigura si mueves la meta caja que lo contiene (específicamente, si la ubicación de TinyMCE en el DOM cambia). Sin embargo, puedes usar la versión de Quicktags (sin TinyMCE). Otra alternativa es simplemente no mover la caja (poco elegante) o añadir tus editores usando los hooks edit_page_form o edit_form_advanced en lugar de usar add_meta_box().

Escribí un plugin rápido para demostrar el problema. Es un ejemplo completamente funcional de cómo usar wp_editor en una meta caja. Puedes configurar wp_editor para hacerlo más compatible con meta cajas desactivando TinyMCE y activando quicktags usando los argumentos apropiados.

<?php
/**
 * Plugin Name: WP Editor en una Meta Caja
 * Plugin URI: 
 * Description: Demostración de WP Editor en una meta caja.
 * Version: 1.0
 * Author: goto10
 * Author URI: 
 * License: 
 */

// Nombre del archivo: wp_editor-in-meta-box-test.php 

/* Código de meta caja basado en http://codex.wordpress.org/Function_Reference/add_meta_box */

/* Definir la caja personalizada */
add_action( 'add_meta_boxes', 'myplugin_add_custom_box' );

/* Hacer algo con los datos ingresados */
add_action( 'save_post', 'myplugin_save_postdata' );

/* Añade una caja a la columna principal en las pantallas de edición de Entradas y Páginas */
function myplugin_add_custom_box() {
  add_meta_box( 'wp_editor_test_1_box', 'Caja de Prueba de WP Editor #1', 'wp_editor_meta_box' );
}

/* Imprime el contenido de la caja */
function wp_editor_meta_box( $post ) {

  // Usar nonce para verificación
  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' );
}

/* Cuando se guarda la entrada, guarda nuestros datos personalizados */
function myplugin_save_postdata( $post_id ) {

  // Verificar si es una rutina de auto guardado.
  // Si lo es, nuestro formulario no se ha enviado, así que no queremos hacer nada
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
      return;

  // Verificar que esto viene de nuestra pantalla y con la autorización adecuada,
  // porque save_post puede ser activado en otros momentos
  if ( ( isset ( $_POST['myplugin_noncename'] ) ) && ( ! wp_verify_nonce( $_POST['myplugin_noncename'], plugin_basename( __FILE__ ) ) )
      return;

  // Verificar permisos
  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, estamos autenticados: necesitamos encontrar y guardar los datos
  if ( isset ( $_POST['_wp_editor_test_1'] ) ) {
    update_post_meta( $post_id, '_wp_editor_test_1', $_POST['_wp_editor_test_1'] );
  }

}

Edición: Esta versión de la función wp_editor_meta_box() del ejemplo anterior tendrá TMCE desactivado y Quicktags activado:

/* Imprime el contenido de la caja */
function wp_editor_meta_box( $post ) {

  // Usar nonce para verificación
  wp_nonce_field( plugin_basename( __FILE__ ), 'myplugin_noncename' );

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

  // Configuración que pasaremos a wp_editor
  $args = array (
        'tinymce' => false,
        'quicktags' => true,
  );
  wp_editor( $field_value[0], '_wp_editor_test_1', $args );
}
23 abr 2012 06:06:14
Comentarios

Gracias por el código. ¿Podrías explicar un poco más sobre "la ubicación de TinyMCE en el DOM cambia" y cómo podría proceder para "deshabilitar TinyMCE y habilitar quicktags"?

Travis Pflanz Travis Pflanz
23 abr 2012 06:30:10

No hay problema. He actualizado la respuesta con una versión sin Tiny. Además, cuando mueves un meta box usando su función de arrastrar y soltar, este se mueve en el DOM. Si el meta box contiene una instancia de TinyMCE, la posición de esa instancia en el DOM habrá cambiado, lo que causa problemas. Aparentemente es posible superar estos problemas, pero requeriría mucha funcionalidad nueva, por lo que se decidió que wp_editor (al menos cuando usa TinyMCE) no debería usarse en un meta box.

Dave Romsey Dave Romsey
23 abr 2012 06:59:03
1

¿Estás buscando un ejemplo de código desde cero, o considerarías integrar un plugin de metabox personalizado que admita un editor WYSIWYG en un metabox? Si es lo último, podría sugerirte https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress

23 abr 2012 05:53:24
Comentarios

Estoy buscando un ejemplo desde cero sin un plugin. Actualizaré la pregunta.

Travis Pflanz Travis Pflanz
23 abr 2012 05:57:18