Tiny Mce Toolbar In Wordpress Visual Editor

Cómo crear un complemento de WordPress TinyMCE

Si es un desarrollador de WordPress, en algún momento puede personalizar o ampliar el editor visual de WordPress. Por ejemplo, es posible que desee agregar un botón a la barra de herramientas del editor visual para permitir que su cliente inserte 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 complemento TinyMCE en WordPress.

Términos y condiciones

Este tutorial está destinado a usuarios avanzados. Si es un usuario de nivel principiante que solo desea ampliar el editor visual, consulte el complemento TinyMCE Advanced o eche un vistazo a estos consejos sobre el uso del editor visual de WordPress. Para este tutorial, necesitará habilidades básicas de codificación, acceso a una instalación de WordPress donde pueda probarlo. Desarrollar complementos en un sitio web en vivo es una mala práctica. Un error menor en el código puede hacer que su sitio sea inaccesible. Pero si tiene que hacer esto en un sitio en vivo, al menos primero haga una copia de seguridad de WordPress.

Creación de su primer complemento TinyMCE

Comenzaremos creando un complemento de WordPress para registrar nuestro botón de barra de herramientas TinyMCE personalizado. Cuando se hace clic, este botón permitirá al usuario agregar un enlace con una clase CSS personalizada. El código fuente se proporcionará en su totalidad al final de este artículo, pero hasta entonces, creemos el complemento paso a paso. Primero, debe 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 ahí, comenzaremos a agregar nuestro código de complemento.

El encabezado del complemento

Cree un nuevo archivo en el directorio del complemento que acabamos de crear y nombre este archivo tinymce-custom-link-class.php. Agregue este código al archivo y guárdelo. / ** * Nombre del complemento: Clase de enlace personalizado de TinyMCE * URI del complemento: http://MundoCMS.com * Versión: 1.0 * Autor: MundoCMS * URI del autor: https: // www. MundoCMS.com * Descripción: Un complemento simple de TinyMCE para agregar una clase de enlace personalizada en el editor visual * Licencia: GPL2 * / Esto es solo un comentario de PHP, que le dice a WordPress el nombre del complemento, así como el autor y la descripción. En el área de administración de WordPress, active su nuevo complemento yendo a Complementos Complementos instalados, luego haga clic en Activar junto al complemento TinyMCE Custom Link Class:

Complemento Instalado

Configure nuestra clase de complementos

Si dos complementos de WordPress tienen funciones con el mismo nombre, provocará un error. Evitaremos este problema encapsulando nuestras funciones en una clase. class TinyMCE_Custom_Link_Class {/ ** * Constructor. Se llama cuando se inicializa el complemento. * / function __construct () {}} $ tinymce_custom_link_class = new TinyMCE_Custom_Link_Class; Esto crea nuestra clase PHP, con una construcción, que se llama cuando llegamos a 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 complementos de WordPress.

Comience a configurar nuestro complemento TinyMCE

A continuación, debemos decirle a TinyMCE que tal vez queremos agregar nuestro botón personalizado a la barra de herramientas del editor visual. Para hacer esto, podemos usar acciones de WordPress, en particular, la acción init. Agregue el siguiente código en la función __construct () de su complemento: if (is_admin ()) {add_action (‘init’, array ($ this, ‘setup_tinymce_plugin’)); } Esto comprueba si estamos en la interfaz de administración de WordPress. Si es así, le dice a WordPress que ejecute la función setup_tinymce_plugin en nuestra clase cuando WordPress haya completado su rutina de carga inicial. Luego agregue la función setup_tinymce_plugin: / ** * Verifique si el usuario actual puede editar publicaciones o páginas, y use el editor visual * Si es así, agregue filtros para que podamos registrar nuestro complemento * / function setup_tinymce_plugin () {// Verifique si el usuario registrado de WordPress puede editar publicaciones o páginas // De lo contrario, no registre nuestro complemento TinyMCE if (! Current_user_can (‘edit_posts’) &&! Current_user_can (‘edit_pages’)) {return; } // Compruebe si el usuario de WordPress que ha iniciado sesión ha activado el editor visual // De lo contrario, no registre nuestro complemento TinyMCE if (get_user_option (‘rich_editing’)! == ‘true’) {return; } // Configurar algunos filtros add_filter (‘mce_external_plugins’, array (& $ this, ‘add_tinymce_plugin’)); add_filter (‘mce_buttons’, array (& $ this, ‘add_tinymce_toolbar_button’)); } Esto comprueba si el usuario de WordPress actualmente conectado puede editar publicaciones o páginas. Si no pueden, no tiene sentido registrar nuestro complemento TinyMCE para ese usuario, ya que nunca verán el editor visual. Luego verificamos si el usuario está usando el editor visual, ya que algunos usuarios de WordPress lo deshabilitan a través de Users Your Profile. Nuevamente, si el usuario no está usando el editor visual, devolvemos (salimos) de la función, porque no tenemos nada más que hacer. Finalmente, agregamos dos filtros de WordPress, mce_external_plugins y mce_buttons, para llamar a nuestras funciones que cargarán el archivo JavaScript requerido para TinyMCE, y agregar un botón a la barra de herramientas de TinyMCE.

Guardar el archivo y el botón JavaScript en el editor visual

Vamos y agreguemos la función add_tinymce_plugin: / ** * Agregue un archivo JS compatible con el complemento TinyMCE a la instancia de TinyMCE / Visual Editor * * @param array $ plugin_array Matriz de plugins TinyMCE registrados * @return array Matriz modificada de plugins TinyMCE registrados * / function add_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 debe cargar los archivos Javascript almacenados en la matriz $ plugin_array. Estos archivos Javascript le dirán a TinyMCE qué hacer. También necesitamos agregar código a la función add_tinymce_toolbar_button, para decirle a TinyMCE qué botón nos gustaría agregar a la barra de herramientas: / ** * Agregar un botón a TinyMCE / Visual Editor en el que el usuario puede hacer clic * para insertar un enlace con un clase CSS personalizada. * * @param array $ buttons Matriz de botones TinyMCE guardados * @return Array Matriz modificada de botones TinyMCE guardados * / function add_tinymce_toolbar_button ($ botones) {array_push ($ botones, ‘|’, ‘custom_link_class’); devolver $ botones; } Esto inserta dos elementos en la matriz de botones de TinyMCE: un separador (|) y el nombre programático de nuestro botón (custom_link_class). Guarde su complemento, luego edite una página o publicación para mostrar el editor visual. Es muy probable que la barra de herramientas no se muestre en este momento:
Barra De Herramientas Wordpress-Tinymce-Plugin-Missing
No se preocupe, si usamos la consola de inspección de nuestro navegador web, veremos que TinyMCE ha generado un error 404 y una notificación que nos dice que no puede encontrar nuestro archivo javascript.
Wordpress-Tinymce-Plugin-Js-404
Esto está bien, significa que hemos registrado con éxito nuestro complemento TinyMCE personalizado y ahora necesitamos crear el archivo Javascript para decirle a TinyMCE qué hacer.

Crea el complemento de JavaScript

Cree un nuevo archivo en su carpeta wp-content / plugins / tinymce-custom-link-class y asígnele el nombre tinymce-custom-link-class.js. Agregue este código a su archivo js: (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 complemento TinyMCE. Específicamente, agregamos nuestro complemento a TinyMCE usando la función agregar. Esto acepta dos artículos; el nombre del complemento (custom_link_class) y una función anónima. Si conoce el concepto de funciones en la codificación, una función anónima es solo 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; solo se llama cuando se llama a la función add (). Guarde su archivo Javascript, luego edite una página o publicación para mostrar el editor visual. Si todo funcionó, verá la barra de herramientas:
Wordpress-Tinymce-Plugin-Visual-Editor-Toolbar
En este momento, nuestro botón no se ha agregado a esta barra de herramientas. Esto se debe a que solo le dijimos a TinyMCE que somos un complemento personalizado. Ahora debemos decirle a TinyMCE qué hacer, es decir, agregar un botón a la barra de herramientas. Actualice su archivo JavaScript, reemplazando su código existente con lo siguiente: (function () {tinymce.PluginManager.add (‘custom_link_class’, function (editor, url) {// Add Button to Visual Editor Toolbar editor.addButton (‘custom_link_class’ ), {title: ‘Insertar enlace de botón’, cmd: ‘custom_link_class’,});});}) (); Tenga en cuenta que nuestra función anónima tiene dos argumentos. La primera es la instancia del editor: este es el editor visual de TinyMCE. Así como podemos llamar a varias funciones en PluginManager, también podemos llamar a varias funciones en el editor. En este caso, llamamos a la función addButton, para agregar un botón a la barra de herramientas. Guarde su archivo Javascript y regrese a su editor visual. A primera vista, nada parece haber cambiado. Sin embargo, si coloca el cursor del mouse a la derecha del ícono más a la derecha en la fila superior, debería aparecer una información sobre herramientas:
Wordpress-Tinymce-Plugin-Button-Noicon
Lo hemos conseguido …

Leave a Reply