Cómo crear un plugin de WordPress TinyMCE

Si usted es un desarrollador de WordPress, entonces en algún momento puede que se encuentre personalizando o extendiendo el Editor Visual de WordPress. Por ejemplo, puede añadir un botón a la barra de herramientas de Visual Editor para permitir a su cliente insertar fácilmente un cuadro de texto o un botón de llamada a la acción sin escribir ningún código HTML. En este artículo, le mostraremos cómo crear un plugin TinyMCE en WordPress.

Requisitos

Este tutorial está dirigido a usuarios avanzados. Si usted es un usuario de nivel principiante que sólo quiere ampliar el editor visual, por favor eche un vistazo al plugin TinyMCE Advanced o eche un vistazo a estos consejos sobre el uso del editor visual WordPress.

Para este tutorial, necesitará conocimientos básicos de codificación, acceso a una instalación de WordPress donde podrá probarla.

Es una mala práctica desarrollar plugins en un sitio web en vivo. Un pequeño error en el código puede hacer que su sitio sea inaccesible. Pero si debe hacerlo en un sitio en vivo, entonces al menos haga una copia de seguridad de WordPress primero.

Creación del primer plugin TinyMCE

Comenzaremos por crear un plugin de WordPress para registrar nuestro botón personalizado de la barra de herramientas de TinyMCE. Al hacer clic en este botón, el usuario podrá añadir un enlace con una clase CSS personalizada.

El código fuente será proporcionado en su totalidad al final de este artículo, pero hasta entonces, vamos a crear el plugin paso a paso.

Primero, necesita crear un directorio en la carpeta wp-content/plugins de su instalación de WordPress. Nombre esta carpeta tinymce-custom-link-class.

A partir de aquí, empezaremos a añadir nuestro código de plugin.

El encabezado del plugin

Cree un nuevo archivo en el directorio de plugins que acabamos de crear y nombre este archivo tinymce-custom-link-class.php. Añada este código al archivo y guárdelo.

123456789/** * Nombre del plugin: TinyMCE Custom Link Class * Plugin URI: http://wpbeginner.com * Versión: 1.0 * Autor: AprenderWP * Autor URI: https://www.wpbeginner.com * Descripción: Un simple plugin TinyMCE para añadir una clase de enlace personalizada en el Editor Visual * Licencia: GPL2 *//

Esto es sólo un comentario PHP, que le dice a WordPress el nombre del plugin, así como el autor y una descripción.

En el área de administración de WordPress, active su nuevo plugin yendo a Plugins> Installed Plugins, y luego haga clic en Activar al lado del plugin TinyMCE Custom Link Class:

Configurando Nuestra Clase de Plugin

Si dos plugins de WordPress tienen funciones con el mismo nombre, entonces esto causaría un error. Evitaremos este problema al tener nuestras funciones envueltas en una clase.

12345678910111112classTinyMCE_Custom_Link_Class { /** * Constructor. Se llama cuando se inicializa el plugin.    */ function__construct() { } } tinymce_custom_link_class= newTinyMCE_Custom_Link_Class;

Esto crea nuestra clase PHP, junto con una construcción, que se llama cuando alcanzamos la línea $tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;.

Cualquier función que agreguemos dentro de esta clase no debe entrar en conflicto con otros plugins de WordPress.

Comience a configurar nuestro plugin TinyMCE

A continuación, necesitamos decirle a TinyMCE que es posible que queramos añadir nuestro botón personalizado a la barra de herramientas del Editor visual. Para hacer esto, podemos usar las acciones de WordPress - específicamente, la acción init.

Añada el siguiente código dentro de la función __construct() de su plugin:

123if( is_admin()) ) { add_action( init, array( $this, setup_tinymce_plugin) );}; </ i&gt.

Esto comprueba si estamos en la interfaz de administración de WordPress. Si es así, entonces le pide a WordPress que ejecute la función setup_tinymce_plugin dentro de nuestra clase cuando WordPress haya terminado su rutina de carga inicial.

A continuación, añada la función setup_tinymce_plugin:

1234567891011121314141516171818192021222324/*** Compruebe si el usuario actual puede editar Mensajes o Páginas, y si está usando el Editor Visual* Si es así, agregue algunos filtros para que podamos registrar nuestro plugin*/funtionsetup_tinymce_plugin() { // Compruebe si el usuario de WordPress que ha iniciado sesión puede editar Mensajes o Páginas/// Si no, no, no registre nuestro plugin TinyMCE si[! current_user_can( edit_posts) && ! current_user_can( edit_pages) ) { retorno;} // Compruebe si el usuario de WordPress que ha iniciado sesión tiene activado el Editor Visual// Si no, no registre nuestro plugin TinyMCE( get_user_option( rich_editing) !== true) {reurn;} // Configurar algunos filtrosadd_filter (mce_external_plugins, array( &$this, add_tinymce_plugin) );add_filter(mce_buttons, array( &$this, add_tinymce_toolbar_button) ); }; }

Esto comprueba si el usuario actual conectado en WordPress puede editar Mensajes o Páginas. Si no pueden, no tiene sentido registrar nuestro plugin TinyMCE para ese usuario, ya que nunca verán el editor visual.

Luego comprobamos si el usuario está usando el Editor Visual, ya que algunos usuarios de WordPress lo desactivan a través de Usuarios> Su Perfil. De nuevo, si el usuario no está usando el Editor Visual, le devolvemos la función, ya que no necesitamos hacer nada más.

Finalmente, añadimos dos filtros de WordPress - mce_external_plugins y mce_buttons, para llamar a nuestras funciones que cargarán el archivo Javascript necesario para TinyMCE, y añadiremos un botón a la barra de herramientas de TinyMCE.

Registro del archivo y botón Javascript en el editor visual

Vamos a añadir la función add_tinymce_plugin:

12345678910111213/*** Añade un archivo JS compatible con el plugin TinyMCE a la instancia de TinyMCE / Visual Editor** @param array $plugin_array Array of registered TinyMCE Plugins* @return array Modified array of registered TinyMCE Plugins*/functionadd_tinymce_plugin( $plugin_array) { $plugin_array[custom_link_class] = plugin_dir_url( _FILE tinymce-custom-link-class.js;return$plugin_array; }    

Esta función le dice a TinyMCE que necesita cargar los archivos Javascript almacenados en la matriz $plugin_array. Estos archivos Javascript le dirán a TinyMCE qué hacer.

También necesitamos añadir algún código a la función add_tinymce_toolbar_button, para informar a TinyMCE sobre el botón que nos gustaría añadir a la barra de herramientas:

123456789101112/*** Añade un botón al Editor Visual / TinyMCE en el que el usuario puede hacer clic* para insertar un enlace con una clase CSS personalizada.** Matriz modificada de botones TinyMCE registrados*/functionadd_tinymce_toolbar_button( $buttons) { array_push( $buttons, ||, custom_link_class);return$buttons;} Botones de retorno

Esto empuja dos elementos sobre la matriz de botones TinyMCE: un separador (|), y el nombre programático de nuestro botón (custom_link_class).

Guarda tu plugin, y luego edita una Página o Post para ver el Editor Visual. Lo más probable es que la barra de herramientas no se muestre ahora mismo:

No se preocupe - si usamos la consola de inspección de nuestro navegador web, veremos que TinyMCE ha generado un error 404 y un aviso, diciéndonos que no puede encontrar nuestro archivo Javascript.

Eso es bueno - significa que hemos registrado con éxito nuestro plugin personalizado TinyMCE, y ahora necesitamos crear el archivo Javascript para decirle a TinyMCE qué hacer.

Creación del plugin Javascript

Cree un nuevo archivo en su carpeta wp-content/plugins/tinymce-custom-link-class, y llámelo tinymce-custom-link-class.js. Añade este código en tu archivo js:

12345(function() { tinymce.PluginManager.add( custom_link_class, function( editor, url ) { });})();

Esto llama a la clase TinyMCE Plugin Manager, que podemos usar para realizar una serie de acciones relacionadas con el plugin TinyMCE. Específicamente, estamos añadiendo nuestro plugin a TinyMCE usando la función add.

Esto acepta dos elementos; el nombre del plugin (custom_link_class) y una función anónima.

Si está familiarizado con el concepto de funciones en la codificación, una función anónima es simplemente una función sin nombre. Por ejemplo, la función foobar() {.... } es una función que podríamos llamar en otro lugar de nuestro código usando foobar().

Con una función anónima, no podemos llamar a esa función en otro lugar de nuestro código - sólo se llama en el momento en que se invoca la función add().

Guarde su archivo Javascript y, a continuación, edite una página o un mensaje para ver el Editor visual. Si todo funcionó, verá la barra de herramientas:

En este momento, nuestro botón no ha sido añadido a la barra de herramientas. Esto se debe a que sólo le hemos dicho a TinyMCE que somos un plugin personalizado. Ahora tenemos que decirle a TinyMCE qué hacer, es decir, añadir un botón a la barra de herramientas.

Actualice su archivo Javascript, reemplazando su código existente por el siguiente:

123456789(function() { tinymce.PluginManager.add( custom_link_class, function(custom_link_class, function( // Add Button to Visual Editor Toolbar editor.addButton(custom_link_class, { title: Insert Button Link, cmd: custom_link_class, }); });})();

Note que nuestra función anónima tiene dos argumentos. El primero es la instancia del editor - este es el Editor Visual TinyMCE. De la misma manera que podemos llamar a varias funciones en el PluginManager, también podemos llamar a varias funciones en el editor. En este caso, estamos llamando a la función addButton, para añadir un botón a la barra de herramientas.

Guarde su archivo Javascript y vuelva a su Editor Visual. A primera vista, nada parece haber cambiado. Sin embargo, si pasa el cursor del ratón a la derecha del icono más a la derecha de la fila superior, aparecerá un tooltip:

Hemos añadido con éxito un botón a la barra de herramientas, pero necesita una imagen. Añada el siguiente parámetro a la función addButton, debajo de la línea title::

image: url + /icon.png,

>

url es la URL de nuestro plugin. Esto es útil si queremos hacer referencia a un archivo de imagen dentro de nuestra carpeta de plugins, ya que podemos añadir el nombre del archivo de imagen a la URL. En este caso, necesitaremos una imagen llamada icon.png en la carpeta de nuestro plugin. Utilice el siguiente icono:

Recargue nuestro Editor Visual, y ahora verá su botón con el icono:

Definición de un comando para ejecutar

Ahora mismo, si haces clic en el botón, no pasará nada. Vamos a añadir un comando a TinyMCE que le diga qué hacer cuando se haga clic en nuestro botón.

En nuestro archivo Javascript, agregue el siguiente código debajo del final de la sección editor.addButton:

1234// Añadir comando cuando Button Clickeditor.addCommand(custom_link_class, function() { alert(Button clicked!);});

Recargue nuestro Editor Visual, haga clic en el botón y aparecerá una alerta confirmando que acabamos de hacer clic en el botón:

Reemplacemos la alerta con un aviso, preguntando al usuario por el enlace que desea envolver el texto seleccionado en el Editor Visual:

1234567891011121314151516171819202122232425/// Add Command when Button Clickeditor.addCommand(custom_link_class, function() { // Compruebe que hemos seleccionado algún texto que queremos vincular vartext = editor.selection.getContent({ format: html }); if( text.length ===0 ) { alert( `Seleccione algún texto para vincular.); return; }.     // Pedir al usuario que introduzca una URL varresult = prompt(Enter the link); si(!result ) { // User cancelled - exit return; } si(result.length ===0) { // User did not enter a URL - exit return; }     // Insertar el texto seleccionado de nuevo en el editor, envolviéndolo en una etiqueta de anclaje editor.execCommand(mceReplaceContent, false, + resultado + ">+ texto + );});

Este bloque de código realiza algunas acciones.

Primero, comprobamos si el usuario seleccionó algún texto para ser enlazado en el Editor Visual. Si no es así, verán una alerta que les indicará que seleccionen algún texto para vincular.

A continuación, les pedimos que introduzcan un enlace, comprobando de nuevo si lo han hecho. Si cancelaron, o no entraron nada, no hacemos nada más.

Finalmente, ejecutamos la función execCommand en el editor TinyMCE, específicamente ejecutando la acción mceReplaceContent. Esto reemplaza el texto seleccionado con nuestro código HTML, que consiste en un enlace de anclaje con el texto que el usuario seleccionó.

Si todo funcionó, verá que el texto seleccionado ahora está enlazado en las vistas Editor visual y Texto, con el botón de clase a:

Resumen

Hemos creado con éxito un plugin de WordPress que añade un botón al editor visual de TinyMCE en WordPress. Este tutorial también ha cubierto algunos de los conceptos básicos de los filtros de TinyMCE API y WordPress disponibles para las integraciones de TinyMCE.

Añadimos código para que cuando un usuario haga clic en nuestro botón personalizado, se le pida que seleccione algún texto en el Editor visual, que luego podrá vincular a una URL de su elección. Finalmente, nuestro plugin reemplaza el texto seleccionado por una versión enlazada que contiene una clase CSS personalizada llamada botón.

Esperamos que este tutorial le haya ayudado a aprender a crear un plugin de WordPress TinyMCE. También puede consultar nuestra guía sobre cómo crear un plugin de WordPress específico para el sitio.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir