Esta es la segunda parte de dos artículos dedicados a los editores de WordPress. El primer artículo fue dedicado íntegramente al editor de texto de WordPress, mientras que en este artículo diseccionaremos el editor TinyMCE de WordPress, y lo haremos a nuestra manera. Sigue leyendo a continuación, ya que te mostraremos cómo hacerlo:

WordPress TinyMCE

TinyMCE es un editor WYSIWYG basado en un navegador escrito en JavaScript y publicado como software de código abierto bajo LGPL

Editor de WordPress TinyMCE

Actualización: WordPress 5.0 cambiará la forma en que escribimos y publicamos los contenidos. Asegúrate de echar un vistazo a nuestra guía: ¿Qué hay de nuevo en WordPress 5.0 (Cómo prepararse para Gutenberg)

Por defecto, WordPress, el editor de TinyMCE, proporciona dos filas de botones para crear, editar y dar formato al contenido de los mensajes. La primera fila (la barra de herramientas principal) incluye funciones de estilo y formato. Los controles adicionales permiten añadir, editar y eliminar anclas, añadir la etiqueta

activar el modo libre de distracción. Todos estos botones deben parecer bastante familiares a cualquiera con conocimientos básicos de un procesador de textos.

El botón Alternar barra de herramientas cambia la barra de herramientas del editor avanzado (la segunda fila de botones), que proporciona un menú desplegable de elementos de texto (párrafo, encabezados y texto preformateado), más controles de estilo y algunas funciones adicionales (Pegar como texto, Borrar formato, Caracteres especiales, Deshacer y Rehacer) que son útiles de muchas maneras distintas.

Personajes especiales

La tabla de caracteres especiales permite a los usuarios añadir rápidamente entidades HTML

Por último, el botón de signo de interrogación ofrece una lista de atajos de teclado que mejoran la experiencia de escritura del usuario.

atajos

El panel de atajos de TinyMCE

Ahora agrega y estiliza tu contenido en el editor visual, y luego cambia al editor de texto. Encontrarás la estructura HTML correspondiente, ya que WordPress conservará tu entrada al pasar del modo visual al modo de texto.

Las barras de herramientas primarias y avanzadas predeterminadas proporcionan un buen número de funcionalidades que pueden ampliarse con botones y controles adicionales. Muchos de estos botones están disponibles fuera de la caja en TinyMCE, y solo necesitamos activarlos para ponerlos en acción. Además, podemos añadir un buen número de funcionalidades avanzadas instalando uno o más de los plugins existentes.

Y si todos estos botones no son suficientes, podemos mejorar el editor con sus funcionalidades más geniales, desarrollando plugins personalizados.

Dicho esto, empecemos a sumergirnos en el tema desde el uso más fácil y común de la API.

Añadir Estilos Personalizados al Editor de WordPress TinyMCE

Supongamos que necesitas proporcionar una forma fácil de añadir estilos personalizados en el contenido de los mensajes de TinyMCE. Es un procedimiento de dos pasos:

Podemos hacer la primera tarea filtrando la serie de botones de TinyMCE. La barra de herramientas por defecto muestra una o dos filas de botones, pero podemos habilitar hasta cuatro filas de la barra de herramientas gracias a los siguientes filtros:

Podemos añadir una función de devolución de llamada a uno de estos filtros para mostrar/ocultar los botones existentes, como el menú desplegable de Selección de estilo. La siguiente función activa el menú de la segunda fila:

function my_mce_buttons_2( $buttons ) {
	array_unshift( $buttons, 'styleselect' );
	return $buttons;
}
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

La función PHP array_unshift preinstala el elemento de selección de estilo al frente de la matriz $buttons.

styleselect

El menú desplegable Formato mostrará una lista de todos los estilos CSS disponibles

Ahora que el botón ha sido activado, podemos registrar nuestros estilos personalizados filtrando una serie de parámetros de configuración de TinyMCE a través del filtro tiny_mce_before_init.
Considera la siguiente función:

function my_tiny_mce_before_init( $mceInit ) {
	$style_formats = array(
		array(
			'title' => 'PHP',
			'block' => 'code',
			'classes' => 'language-php'
		)	
	);
	$mceInit['style_formats'] = json_encode( $style_formats );	
	return $mceInit;    
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

El elemento style_formats es un conjunto de elementos codificados en JSON. Cada elemento establece los parámetros de configuración de un solo elemento del menú. La función anterior sustituye los estilos por defecto por un único elemento personalizado que envuelve el texto seleccionado en un elemento code.language-php.

formatos de estilo

El menú desplegable de Selección de estilo que contiene un solo elemento personalizado

En nuestro ejemplo, establecimos tres propiedades para un solo elemento del menú:

Añadimos el elemento de código como bloque, para que se aplique solo una vez a la selección completa. Añadiéndolo como elemento en línea se aplicaría la etiqueta de código a cada línea seleccionada.

Podemos agregar más artículos y agruparlos por categoría, como muestra el siguiente ejemplo:

function my_tiny_mce_before_init( $mceInit ) {
	$style_formats = array(
		array(
			'title' => 'Code language',
			'items' => array(
				array(
					'title' => 'PHP',
					'block' => 'code',
					'classes' => 'language-php'
				),
				array(
					'title' => 'CSS',
					'block' => 'code',
					'classes' => 'language-css'
				),
				array(
					'title' => 'HTML',
					'block' => 'code',
					'classes' => 'language-html'
				)
			)
		)	
	);

	$mceInit['style_formats'] = json_encode( $style_formats );
	
	return $mceInit;    
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

El elemento style_formats es un conjunto multidimensional de parámetros. En este ejemplo, hemos añadido un elemento de primer nivel (Lenguaje de código) y tres sub elementos (PHP, CSS, HTML). La imagen de abajo muestra el menú resultante.

formatos de estilo avanzado

Podemos agrupar los elementos del menú y reducir el tamaño del menú en la pantalla

TinyMCE aplica los estilos a los elementos seleccionados, pero no es consciente de estos estilos, por lo que no se aplicarán al contenido en el editor. Si se necesita una vista previa en tiempo real, tendremos que registrar una hoja de estilo personalizada con la función add_editor_style():

/**
 * Registers an editor stylesheet for a custom theme.
 */
function my_theme_add_editor_styles() {
	add_editor_style( 'css/my-editor-style.css' );
}
add_action( 'admin_init', 'my_theme_add_editor_styles' );

Esta función registra una hoja de estilo que será utilizada por el WordPress TinyMCE para estilizar el contenido en el editor.
Como ejemplo, supongamos que quisiéramos aplicar diferentes colores al código PHP, CSS y HTML. Para llevar a cabo esta tarea, añadiremos las siguientes declaraciones en la hoja de estilo css/my-editor-style.css:

.language-php{ color: red; }
.language-css{ color: green; }
.language-html{ color: blue; }

TinyMCE generará la salida que se muestra en la siguiente imagen.

añadir estilos de edición

Nota: Hemos revisado solo unos pocos ajustes de configuración, pero la API de TinyMCE da a los desarrolladores un gran control sobre el editor. Consulta la documentación de TinyMCE para la lista completa de elementos y propiedades con algunos ejemplos de uso.

Habilitar los Botones Ocultos de WordPress TinyMCE

Podemos añadir botones al editor visual de varias maneras. En muchos casos no se nos exige construir un botón personalizado porque TinyMCE proporciona un buen número de botones ocultos que podemos activar fácilmente.
Uno de estos botones es el menú desplegable Styleselect, pero tenemos una larga lista de botones inactivos que podemos activar filtrando las matrices de botones a través de uno de los filtros mce_buttons_{n} (ver documentos de TinyMCE para la lista completa de botones disponibles).

Considera el siguiente ejemplo:

function my_mce_buttons_3( $buttons ) {	
	$buttons[] = 'superscript';
	$buttons[] = 'subscript';
	return $buttons;
}
add_filter( 'mce_buttons_3', 'my_mce_buttons_3' ); 

La función de devolución de llamada de arriba añade los elementos de superscript y subscript al final de la matriz $buttons.

La imagen muestra dos botones extra añadidos a la tercera fila de la barra de herramientas de TinyMCE

La imagen muestra dos botones adicionales añadidos a la tercera fila de la barra de herramientas de TinyMCE

Aquí hay una lista de botones ocultos disponibles en WordPress TinyMCE:

Barra de herramientas de TinyMCE

La imagen muestra la barra de herramientas de TinyMCE con todos los botones disponibles

Si ninguno de estos botones se ajusta a nuestras necesidades, podemos proporcionar al editor más funcionalidades, gracias a un buen número de plugins oficiales.

Mejorar el Editor Visual con los Plugins de TinyMCE

Supongamos que tu objetivo es incluir el botón de la Tabla TinyMCE en el editor visual a través de un plugin de WordPress.

Primero, tienes que descargar el Paquete de Desarrollo del sitio web de TinyMCE. Descomprime el archivo zip y consigue el archivo plugin.min.js de la carpeta /js/tinymce/plugin/table.

Crea las siguientes carpetas en /wp-content/plugins:

Cuando termines, crea un nuevo archivo tinymce-example-plugin.php en la carpeta raíz del plugin, y sube el archivo plugin.min.js a la carpeta de la tabla (ver la imagen de abajo).

La imagen muestra la estructura de archivos del plugin

La imagen muestra la estructura de archivos del plugin

Ahora añade las siguientes líneas en tinymce-ejemplo-plugin.php:

<?php
/**
 * @package TinyMCE_example_plugin
 * @version 1.0
 */
/*
Plugin Name: TinyMCE example plugin
Plugin URI: http://wordpress.org/extend/plugins/#
Description: This is an example plugin 
Author: Your Name
Version: 1.0
Author URI: http://yourdomain.com/
*/ 

Para incluir el botón de la tabla en el editor de WordPress TinyMCE sólo necesitamos dos filtros:
mce_buttons añade nuevos botones a la barra de herramientas principal de TinyMCE (podemos usar cualquiera de los filtros de mce_buttons_{n}, dependiendo de la fila en la que se quiere mostrar el botón)
mce_external_plugins carga un plugin externo TinyMCE.

¿Luchando con el tiempo de inactividad y los problemas de WordPress? Kinsta es la solución de alojamiento diseñada para ahorrarle tiempo! Vea nuestras características

Aquí está el código del archivo del plugin:

function example_plugin_register_buttons( $buttons ) {
   $buttons[] = 'table';
	return $buttons;
}
// add new buttons
add_filter( 'mce_buttons', 'example_plugin_register_buttons' );

function example_plugin_register_plugin( $plugin_array ) {
   $plugin_array['table'] = plugins_url( '/mce/table/plugin.min.js', __FILE__ );
   return $plugin_array;
}
// Load the TinyMCE plugin
add_filter( 'mce_external_plugins', 'example_plugin_register_plugin' );

La primera función añade un nuevo botón a la barra de herramientas principal, mientras que la segunda función carga un plugin desde la URL especificada. La función plugins_url() recupera la URL absoluta del archivo especificado bajo el directorio de plugins (leer más en el Codex).

Ahora podemos guardar el archivo y activar el plugin. La imagen de abajo muestra la barra de herramientas mejorada.

mesa

Eso es todo. Siguiendo el mismo procedimiento, podemos añadir cualquier plugin de TinyMCE existente al editor visual de WordPress.

Puedes descargar el archivo plugin .zip, o ver el código PHP de este ejemplo en Gist.

Construir un Plugin TinyMCE

Finalmente, podemos construir nuestro plugin personalizado TinyMCE. Supongamos que quieres añadir un botón para permitir a los usuarios envolver el contenido seleccionado en las siguientes etiquetas:

<pre><code>Selected text</code></pre>

Incluso podemos decidir añadir una clase CSS a la etiqueta <code>, para proporcionar soporte para el resaltador de códigos Prism. Necesitamos:

Ya sabemos cómo registrar un plugin y añadir un botón en WordPress TinyMCE:

function example_plugin_register_buttons( $buttons ) {
	$buttons[] = 'prism';
	return $buttons;
}
// add new buttons
add_filter( 'mce_buttons', 'example_plugin_register_buttons' );

function example_plugin_register_plugin( $plugin_array ) {
	$plugin_array['prism'] = plugins_url( '/mce/prism/plugin.js', __FILE__ );
	return $plugin_array;
}
// Load the TinyMCE plugin
add_filter( 'mce_external_plugins', 'example_plugin_register_plugin' );

Este es exactamente el mismo código del ejemplo anterior, con la única diferencia de que ahora estamos registrando un plugin personalizado llamado prisma.
Ahora vamos a crear el siguiente archivo plugin.js:

(function() {
	var languages = ['css', 'php', 'html', 'javascript'];
	
	tinymce.PluginManager.add( 'prism', function( editor ){
		
		var items = [];

		tinymce.each( languages, function( languageName ){
			items.push({
				text: languageName,
				onclick: function(){
					var content = tinyMCE.activeEditor.selection.getContent();
					editor.insertContent( '<pre><code class="language-' + languageName + '">' + content + '</code></pre>' );
				}
			});
		});

		editor.addButton( 'prism', {
			type: 'menubutton',
			text: 'Prism',
			icon: 'code',
			menu: items
		});

	});
})();

Este código también está disponible en Gist.

No está en nuestros objetivos sumergirnos en las API de TinyMCE, y encontrarás todo lo que necesitas saber en los documentos de TinyMCE para desarrolladores.
Este archivo debe ser colocado en la subcarpeta /mce/prism/ de nuestro directorio de plugins. La función JS itera entre los elementos de la matriz de idiomas y empuja un nuevo objeto a la matriz de elementos para cada idioma. El método addButton crea el botón de menú Prism, y añade un elemento de menú para cada elemento del conjunto de elementos.

Guarda, sube y actualiza, y tu magnífico botón del menú desplegable aparecerá en todo su esplendor.

botón de menú del prism

Cualquier información adicional sobre cómo desarrollar los plugins de TinyMCE se puede encontrar en la documentación online para desarrolladores.

TinyMCE Plugin Avanzado para WordPress

Si no eres un desarrollador, tu también puedes mejorar el editor visual . TinyMCE Advanced es un plugin gratuito de WordPress que contiene las funcionalidades de quince plugins de TinyMCE al editor visual predeterminado.

Gracias a TinyMCE Advanced los usuarios añadirán, quitarán y reordenarán los botones de las cuatro filas de la barra de herramientas del editor. Además, el plugin ofrece una opción para habilitar un menú encima de la barra de herramientas.

TinyMCE Advanced proporciona una lista completa de los ajustes del editor

Desde la página de configuración del editor podemos añadir, eliminar y organizar los botones de la barra de herramientas de TynyMCE

Desde la página de opciones del plugin podemos habilitar varias funciones avanzadas, como el botón Tabla, los menús Familia de fuentes y Tamaño de fuente, los botones Mostrar bloques y Mostrar caracteres invisibles.

Otras opciones permiten a los usuarios determinar el editor que se verá afectado por los nuevos ajustes, y más.

Desde la página de configuración del editor podemos añadir, eliminar y organizar los botones de la barra de herramientas de TynyMCE

TinyMCE Advanced proporciona una lista completa de ajustes del editor

Conclusiones

La API de TinyMCE proporciona un montón de cosas con las que podemos jugar. Podemos activar funcionalidades ocultas o registrar plugins externos. Y si ninguna de las funciones disponibles es suficiente para nosotros, podemos divertirnos con la API y construir extensiones personalizadas. ¿Tienes alguna otra idea para mejorar el editor de WordPress TinyMCE?


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes