Añadir Tiny MCE en campos de texto dentro de WordPress con wp_editor sin plugins

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):

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”.

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:

En este caso agregaríamos el código:

$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.

$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

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.
Scroll to top