La función wp_editor es muy útil para añadir el TinyMCE que viene con WordPress a cualquier campo de texto en nuestro sitio sin necesidad de instalar ningún plugin o emplear código adicional.
Esta función tiene como cometido cargar en los campos donde se implante el código el editor de texto WYSIWYG que trae el editor de entradas y páginas en WordPress.
Analizando la función wp_editor
Tenemos que añadir el siguiente código en nuestro archivo (puede ser dentro de un plugin por ejemplo):
|
1
|
<?php wp_editor( $content, $editor_id, $settings = array() ); ?>
|
LOS PARÁMETROS
$content por defecto viene configurado en “none”, es decir, dentro del campo no habrá texto por defecto. Podríamos poner por ejemplo: “Escribe una descripción aquí, puedes emplear todas las herramientas para dar estilo al texto”.
|
1
|
<?php wp_editor( ‘Escribe una descripción aquí, puedes emplear todas las herramientas para dar estilo al texto’, $editor_id, $settings = array() ); ?>
|
También podemos emplear una variable. Definimos lo siguiente si esta textarea es parte de un formulario y necesitamos que se guarde el contenido ya escrito en caso de que haya un error al enviar el formulario:
|
1
2
3
4
5
|
<?php if ( !empty ($has_error) ) {
$contenido = $_POST[‘contenido_tinymce’]; # Si hay un error aparece el contenido que escribimos
} else {
$contenido = ”; # Si todo salió perfecto muestra el campo vacío
} ;?>
|
En este caso agregaríamos el código:
|
1
|
<?php wp_editor( $contenido, $editor_id, $settings = array() ); ?>
|
$editor_id es un parámetro muy importante, ya que define el atributo HTML que lo define. Es la ID que tendrán la textarea y TinyMCE. Sólo puede contener letras en minúscula. Así que nombres con mayúsculas, números y/o guiones no están permitidos, ya que causarán un error en el editor WYSIWYG.
|
1
|
<?php wp_editor( $content, ‘tinymcedinvaders’, $settings = array() ); ?>
|
$settings = array () es el único parámetro de esta función que es opcional, allí podremos añadir un array de argumentos para personalizar el campo. Para ver todos los argumentos que pueden ir en este parámetros pueden consultar el codex de WordPress.
Ejemplo
|
1
|
<?php wp_editor( ”, ‘contentid’, array( ‘textarea_name’ => ‘contenido’, ‘media_buttons’ => true, ‘tinymce’ => array( ‘theme_advanced_buttons1’ => ‘formatselect,forecolor,|,<wbr>bold,italic,underline,|,<wbr>bullist,numlist,blockquote,|,<wbr>justifyleft,justifycenter,<wbr>justifyright,justifyfull,|,<wbr>link,unlink,|,spellchecker,wp_<wbr>fullscreen,wp_adv’ ) ) );?> </wbr></wbr></wbr></wbr></wbr></wbr>
|
El contenido inicial está vacío, pero recuerden: podemos emplear texto o una variable. El ID del editor será “contentid”.
Para settings definimos un array que contiene lo siguiente:
'textarea_name' => 'contenido',define un nombre diferente del id HTML del campo para que pueda ser insertado en una base de datos o enviado por correo por ejemplo.'media_buttons' => true,agrega sobre el editor el botón para insertar imágenes y demás contenido multimedia'tiny_mce' =>carga el Tiny MCE de WordPress permitiéndonos agregar configuración extra. Para consultar todas las posibilidades que tienen, consulten la documentación de Tiny MCE. En este caso utilizamos'the_advanced_buttons1' =>y agregamos todos los botones que trae WordPress en su editor.