Cómo desactivar el editor enriquecido de texto para el tipo de campo textarea de buddypress

Esta semana johnywhy me hizo esta pregunta en el foro de mi plugin.

¿Tus usuarios están jugueteando con el editor de texto enriquecido? ¿Estás viendo colores extraños, fuentes enormes y negritas por todo tu sitio web? Pues deberías desactivar ese editor de texto enriquecido del demonio.

Voy a explicarte dos maneras de realizar esto.

La manera sencilla

¡Buddypress tiene un filtro para esto! “bp_xprofile_is_richtext_enabled_for_field”. Por lo tanto, sólo tienes que utilizarlo.

• Si quieres deshabilitar el editor de texto enriquecido para TODOS los campos:
  PHP

  function bp_disable_richtext($enabled, $field_id) { $enabled = false; return $enabled; } add_filter('bp_xprofile_is_richtext_enabled_for_field', 'bp_disable_richtext', 10, 2);

  1 2 3 4 5

  function bp_disable_richtext($enabled, $field_id) { $enabled = false; return $enabled; } add_filter('bp_xprofile_is_richtext_enabled_for_field', 'bp_disable_richtext', 10, 2);

• Si quieres deshabilitar el editor para sólo un campo:
  PHP

  function bp_disable_richtext($enabled, $field_id) { // 10 is the id of my field. if ($field_id == 10) { $enabled = false; } return $enabled; } add_filter('bp_xprofile_is_richtext_enabled_for_field', 'bp_disable_richtext', 10, 2);

  1 2 3 4 5 6 7 8

  function bp_disable_richtext($enabled, $field_id) {         // 10 is the id of my field. if ($field_id == 10) { $enabled = false; } return $enabled; } add_filter('bp_xprofile_is_richtext_enabled_for_field', 'bp_disable_richtext', 10, 2);

• Si quieres deshabilitar el editor para más de un campo pero no todos:
  PHP

  function bp_disable_richtext($enabled, $field_id) { // Disable richtext for field ids 10, 11 and 12. if (in_array($field_id, [10,11,12])) { $enabled = false; } return $enabled; } add_filter('bp_xprofile_is_richtext_enabled_for_field', 'bp_disable_richtext', 10, 2);

  1 2 3 4 5 6 7 8

  function bp_disable_richtext($enabled, $field_id) { // Disable richtext for field ids 10, 11 and 12. if (in_array($field_id, [10,11,12])) { $enabled = false; } return $enabled; } add_filter('bp_xprofile_is_richtext_enabled_for_field', 'bp_disable_richtext', 10, 2);

La manera complicada

johnywhy quería crear un nuevo tipo de campo Textarea. La única diferencia sería permitir a los usuarios desactivar el editor de texto enriquecido desde la admin de wordpress. Necesitas crear un nuevo tipo de campo que extienda el original «Textarea» de Buddypress.

Voy a explicar los pasos a seguir para crear tu propio plugin. No voy a explicar cómo crear un plugin. Voy a explicar cómo crear este plugin y cómo funciona.

1. Crear una carpeta llamada “bp-xprofile-custom-textarea”. Es el nombre del plugin.
2. Dentro de esta carpeta, crear una nueva carpeta llamada “classes”.
3. Dentro de bp-xprofile-custom-textarea/classes, crear un archivo php llamado “Bpxct_Field_Type_Textarea.php”. Este archivo contendrá nuestro tipo de campo personalizado “Textarea”. Lo que hice fue copiar la clase original “Textarea” de Buddypress. Puedes encontrar esta clase en “buddypress/bp-xprofile/classes/class-bp-xprofile-field-type-textarea.php”. He hecho algunos cambios a esta versión para adaptarla a lo que necesito. Veamos:
   • Primero, modifiqué el constructor:
     PHP

     public function __construct() { // Call the parent constructor. parent::__construct(); // Now I'm doing my custom work. // Change the name of field type to be sure I'm using MY custom textarea. $this->name = _x( 'Custom multi-line Text Area', 'xprofile field type', 'bpxct' ); // Enables options for this field type. This is required to display the // checkbox options at the bottom of the form. $this->supports_options = true; }

     1 2 3 4 5 6 7 8 9 10 11 12 13

     public function __construct() {         // Call the parent constructor.         parent::__construct();           // Now I'm doing my custom work.           // Change the name of field type to be sure I'm using MY custom textarea.         $this->name = _x( 'Custom multi-line Text Area', 'xprofile field type', 'bpxct' );           // Enables options for this field type. This is required to display the         // checkbox options at the bottom of the form.         $this->supports_options = true;     }

     En los comentarios, explico lo que cambié.

   • Segundo, necesito sobreescribir el método “admin_new_field_html” porque “Textarea” no lo estaba usando. En mi tipo de campo, lo necesito para mostrar el checkbox.
     PHP

     public function admin_new_field_html (\BP_XProfile_Field $current_field, $control_type = '') { // Check if this type is a valid type. $type = array_search( get_class( $this ), bp_xprofile_get_field_types() ); if ( false === $type ) { return; } // If it's not my type of field, hide this. $class = $current_field->type != $type ? 'display: none;' : ''; $current_type_obj = bp_xprofile_create_field_type( $type ); // Get current options. See if my checkbox is already checked. $options = $current_field->get_children( true ); if ( ! $options ) { $options = array(); $i = 1; while ( isset( $_POST[$type . '_option'][$i] ) ) { $is_default_option = true; $options[] = (object) array( 'id' => -1, 'is_default_option' => $is_default_option, 'name' => sanitize_text_field( stripslashes( $_POST[$type . '_option'][$i] ) ), ); ++$i; } if ( ! $options ) { $options[] = (object) array( 'id' => -1, 'is_default_option' => false, 'name' => '', ); } } // Html to display the checkbox. ?> <div id="<?php echo esc_attr( $type ); ?>" class="postbox bp-options-box" style="<?php echo esc_attr( $class ); ?> margin-top: 15px;"> <h3><?php esc_html_e( 'Disable richtext:', 'bpxct' ); ?></h3> <div class="inside"> <p> <?php _e('Check this if you want to disable richtext for this field:', 'bpxct'); ?> <input type="hidden" name="<?php echo esc_attr( "{$type}_option[0]" ); ?>" id="<?php echo esc_attr( "{$type}_option0" ); ?>" value="enable_richtext" /> <input type="checkbox" name="<?php echo esc_attr( "{$type}_option[1]" ); ?>" id="<?php echo esc_attr( "{$type}_option1" ); ?>" value="disable_richtext" <?php if ($options[0]->name == 'disable_richtext') : ?>checked="checked"<?php endif; ?>/> </p> </div> </div> <?php }

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

     public function admin_new_field_html (\BP_XProfile_Field $current_field, $control_type = '') {         // Check if this type is a valid type.         $type = array_search( get_class( $this ), bp_xprofile_get_field_types() );         if ( false === $type ) {             return;         }           // If it's not my type of field, hide this.         $class = $current_field->type != $type ? 'display: none;' : '';         $current_type_obj = bp_xprofile_create_field_type( $type );           // Get current options. See if my checkbox is already checked.         $options = $current_field->get_children( true );         if ( ! $options ) {             $options = array();             $i       = 1;             while ( isset( $_POST[$type . '_option'][$i] ) ) {                 $is_default_option = true;                   $options[] = (object) array(                     'id'                => -1,                     'is_default_option' => $is_default_option,                     'name'              => sanitize_text_field( stripslashes( $_POST[$type . '_option'][$i] ) ),                 );                   ++$i;             }               if ( ! $options ) {                 $options[] = (object) array(                     'id'                => -1,                     'is_default_option' => false,                     'name'              => '',                 );             }         }           // Html to display the checkbox.     ?>         <div id="<?php echo esc_attr( $type ); ?>" class="postbox bp-options-box" style="<?php echo esc_attr( $class ); ?> margin-top: 15px;">             <h3><?php esc_html_e( 'Disable richtext:', 'bpxct' ); ?></h3>             <div class="inside">                 <p>                     <?php _e('Check this if you want to disable richtext for this field:', 'bpxct'); ?>                     <input type="hidden" name="<?php echo esc_attr( "{$type}_option[0]" ); ?>" id="<?php echo esc_attr( "{$type}_option0" ); ?>" value="enable_richtext" />                     <input type="checkbox" name="<?php echo esc_attr( "{$type}_option[1]" ); ?>" id="<?php echo esc_attr( "{$type}_option1" ); ?>" value="disable_richtext"                            <?php if ($options[0]->name == 'disable_richtext') : ?>checked="checked"<?php endif; ?>/>                 </p>             </div>         </div>     <?php     }

     Sobre el código HTML, quizás te estés preguntando porque utilizo dos campos, uno oculto y otro el checkbox. Buddypress espera encontrar al menos un campo «option» cuando activas «support_options». Si nuestro checkbox está desmarcado, se mostraría un error que dice «These field options are invalid”. Pruébalo tú mismo.


     Ahora implementaré el siguiente comportamiento:

     • Si “disable_richtext” está marcado, elimino el campo oculto.

     • Si “disable_richtext” está desmarcado, guardo el valor del campo oculto.

   • Tercero, sobreescribo dos métodos que muestran el campo: “admin_field_html” and “edit_field_html”.

     PHP

     // I need access to field object. global $field; // The original $richtext_enabled flag. $richtext_enabled = bp_xprofile_is_richtext_enabled_for_field(); // I'm looking inside the options to check if the checkbox "disabled_richtext // for this field is checked. $options = $field->get_children(); foreach ($options as $option) { if ($option->name == 'disable_richtext') { // Found it, so $richtext_enabled should be false $richtext_enabled = false; // Stop looking for it, just in case. break; } }

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

     // I need access to field object.         global $field;           // The original $richtext_enabled flag.         $richtext_enabled = bp_xprofile_is_richtext_enabled_for_field();         // I'm looking inside the options to check if the checkbox "disabled_richtext         // for this field is checked.         $options = $field->get_children();         foreach ($options as $option) {             if ($option->name == 'disable_richtext') {                 // Found it, so $richtext_enabled should be false                 $richtext_enabled = false;                 // Stop looking for it, just in case.                 break;             }         }

     Los cambios que hice son los mismos. Busco una opción llamada “disable_richtext”. Si la encuentro, desactivo el editor de texto enriquecido para este campo. Si no la encuentro, me remitiré al código original de Buddypress.

4. Dentro de la carpeta principal, crear la carpeta “js” con un sólo archivo llamado “admin.js”.
   JavaScript

   (function( $ ) { 'use strict'; $(function() { $('#bp-xprofile-add-field').on('submit', function(e) { if ( $('select#fieldtype').val() == 'textarea' && $('#textarea_option1').is(':checked') ) { $('#textarea_option0').remove(); } }); }); })( jQuery );

   1 2 3 4 5 6 7 8 9 10 11 12

   (function( $ ) {     'use strict';       $(function() {         $('#bp-xprofile-add-field').on('submit', function(e) {             if ( $('select#fieldtype').val() == 'textarea' && $('#textarea_option1').is(':checked') ) {                 $('#textarea_option0').remove();             }         });     });   })( jQuery );

   Este código hace lo que contaba anteriormente. Después de pinchar en el botón «submit», si «disable_richtext» está marcado, elimino el campo oculto.


5. Ahora crear el archivo principal del plugin “bp-xprofile-custom-textarea.php”. Colocar este archivo en la carpeta principal de tu plugin.
   PHP

   <?php /* Plugin Name: Bp Xprofile Custom Textarea Plugin URI: http://donmik.com/en/how-to-disable-richtext-editor-for-textarea-buddypress-field-type/ Description: Replace Textarea buddypres field type with my own custom textarea. Version: 0.1.0 Author: donmik Author URI: http://donmik.com */ if (!class_exists('Bp_Xprofile_Custom_Textarea_Plugin')) { class Bp_Xprofile_Custom_Textarea_Plugin { private $version; public function __construct () { $this->version = "0.1.0"; /** Admin hooks **/ add_action( 'admin_init', array($this, 'admin_init') ); /** Buddypress hook **/ add_action( 'bp_init', array($this, 'init') ); /** Filters **/ add_filter( 'bp_xprofile_get_field_types', array($this, 'bpxct_get_field_types'), 10, 1 ); } public function init() { require_once( 'classes/Bpxct_Field_Type_Textarea.php' ); } public function admin_init() { if (is_admin()) { // Enqueue javascript. wp_enqueue_script('bpxct-js', plugin_dir_url(__FILE__) . 'js/admin.js', array(), $this->version, true); } } public function bpxct_get_field_types($fields) { $new_fields = array( 'textarea' => 'Bpxct_Field_Type_Textarea', ); $fields = array_merge($fields, $new_fields); return $fields; } } } if (class_exists('Bp_Xprofile_Custom_Textarea_Plugin')) { $bxcft_plugin = new Bp_Xprofile_Custom_Textarea_Plugin(); }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

   <?php /*     Plugin Name: Bp Xprofile Custom Textarea     Plugin URI: http://donmik.com/en/how-to-disable-richtext-editor-for-textarea-buddypress-field-type/     Description: Replace Textarea buddypres field type with my own custom textarea.     Version: 0.1.0     Author: donmik     Author URI: http://donmik.com */ if (!class_exists('Bp_Xprofile_Custom_Textarea_Plugin')) {     class Bp_Xprofile_Custom_Textarea_Plugin {           private $version;           public function __construct () {             $this->version = "0.1.0";               /** Admin hooks **/             add_action( 'admin_init', array($this, 'admin_init') );               /** Buddypress hook **/             add_action( 'bp_init', array($this, 'init') );               /** Filters **/             add_filter( 'bp_xprofile_get_field_types', array($this, 'bpxct_get_field_types'), 10, 1 );         }           public function init() {             require_once( 'classes/Bpxct_Field_Type_Textarea.php' );         }           public function admin_init() {             if (is_admin()) {                 // Enqueue javascript.                 wp_enqueue_script('bpxct-js', plugin_dir_url(__FILE__) . 'js/admin.js', array(), $this->version, true);             }         }           public function bpxct_get_field_types($fields) {             $new_fields = array(                 'textarea' => 'Bpxct_Field_Type_Textarea',             );             $fields = array_merge($fields, $new_fields);               return $fields;         }     } }   if (class_exists('Bp_Xprofile_Custom_Textarea_Plugin')) {     $bxcft_plugin = new Bp_Xprofile_Custom_Textarea_Plugin(); }

   Poco que decir.

   • El método “init” está incluyendo mi nueva clase: “Bpxct_Field_Type_Textarea.php”.

   • El método “admin_init” está incluyendo mi nuevo archivo js: “admin.js”.

   • El método “bpxct_get_field_types” es un filtro que añade un nuevo tipo de campo «textarea».

6. Finalmente, crear un readme.
   === Bp Xprofile Custom Textarea === Contributors: donmik, johnywhy Tags: buddypress, xprofile, fields, textarea, richtext Requires at least: 4.0 Tested up to: 4.4 Stable tag: 0.1.0 License: GLPv2 or later Replace Textarea buddypres field type with my own custom textarea. == Description == = Buddypress required! (v2.0 at least) = Replace Textarea buddypres field type with my own custom textarea. You will be able to disable richtext editor if you want using a checkbox in admin. == Installation == 1. Upload the plugin to your 'wp-content/plugins' directory 2. Activate the plugin 3. Go to Users > Profile Fields 4. Create or Edit a field. 5. In Field Type select, select "Custom multi-line Text Area". 6. Check the checkbox "disable richtext". 7. Enjoy! == Changelog == = 0.1.0 = * First release!

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

   === Bp Xprofile Custom Textarea === Contributors: donmik, johnywhy Tags: buddypress, xprofile, fields, textarea, richtext Requires at least: 4.0 Tested up to: 4.4 Stable tag: 0.1.0 License: GLPv2 or later   Replace Textarea buddypres field type with my own custom textarea.   == Description ==   = Buddypress required! (v2.0 at least) =   Replace Textarea buddypres field type with my own custom textarea. You will be able to disable richtext editor if you want using a checkbox in admin.   == Installation ==   1. Upload the plugin to your 'wp-content/plugins' directory 2. Activate the plugin 3. Go to Users > Profile Fields 4. Create or Edit a field. 5. In Field Type select, select "Custom multi-line Text Area". 6. Check the checkbox "disable richtext". 7. Enjoy!   == Changelog ==   = 0.1.0 = * First release!

¡Ya está! Ahora puedes subir tu plugin a tu sitio web. En vez de mostrar el tipo de buddypress, verás el tuyo: “Custom multi-line Text Area”. Ahora puedes desactivar el editor de texto enriquecido por cada textarea desed la admin de wordpress. ¡Enhorabuena!

Descarga el plugin desde github si lo deseas.


¡Gracias a johnywhy por preguntarme esto en el foro y darme la idea para este artículo! johnywhy es una persona que enseña informática a niños desfavorecidos en un gueto. Lee más sobre esto en www.facebook.com/bayviewboom.