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:
- Añadir estilos personalizados al editor de WordPress TinyMCE
- Activar los botones ocultos
- Mejorar el editor de WordPress TinyMCE con los plugins existentes
- Desarrollar plugins personalizados de WordPress TinyMCE
- Usa un plugin gratuito de WordPress para añadir estilos y botones a TinyMCE
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.
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.
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:
- primero, necesitamos activar un menú desplegable oculto llamado Styleselect;
- después tenemos que definir cada estilo que queremos añadir al menú de selección de estilos.
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:
- mce_buttons filtra los botones primarios de la barra de herramientas (la primera fila), que siempre está visible;
- mce_buttons_2 filtra los botones avanzados de la barra de herramientas (la segunda fila), que pueden ser activados o desactivados por el usuario;
- mce_buttons_3 inactivo por defecto;
- mce_buttons_4 inactivo por defecto.
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.
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.
En nuestro ejemplo, establecimos tres propiedades para un solo elemento del menú:
- título: el título del elemento del menú;
- bloque: el elemento de bloque a producir;
- clases: lista separada por espacios de las clases CSS para aplicar a la selección.
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.
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.
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.
Aquí hay una lista de botones ocultos disponibles en WordPress TinyMCE:
- cortar
- copiar
- pegar
- hr
- selección de formato
- seleccion de fuente
- fontsizeselect
- selección de estilos
- subscript (anteriormente sub)
- superscript (anteriormente sup)
- backcolor
- nuevo documento
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:
- /wp-content/plugins/tinymce-example-plugin/
- /wp-content/plugins/tinymce-example-plugin/mce/table
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).
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.
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.
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:
- registrar un botón personalizado de TinyMCE y agregar un plugin de WordPress;
- desarrollar el plugin TinyMCE;
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.
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.
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.
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?
Deja una respuesta