Cómo agregar complementos personalizados en TinyMCE en Magento 2.4.6

Tabla de Contenidos

  1. Introducción
  2. La Evolución de TinyMCE en Magento
  3. Por qué los Complementos Personalizados son Importantes
  4. Guía Paso a Paso para Agregar Complementos Personalizados
  5. Estudio de Caso: Agregar el Complemento 'Tabla'
  6. Conclusión
  7. Preguntas Frecuentes

Introducción

¿Has actualizado recientemente a Magento 2.4.6 y has notado que faltan varios complementos familiares de TinyMCE? No estás solo. Muchos usuarios de Magento han encontrado este problema y buscan formas de mejorar su editor de texto para recuperar su funcionalidad anterior. Esta publicación está diseñada para ayudarte a resolver este problema proporcionando instrucciones paso a paso para agregar complementos personalizados a TinyMCE en Magento 2.4.6. Al final de esta guía, tendrás un editor de TinyMCE totalmente personalizado que satisfará todas tus necesidades.

La Evolución de TinyMCE en Magento

TinyMCE, el popular editor WYSIWYG, ha experimentado cambios significativos con el lanzamiento de Magento 2.4.6. Estos cambios han dejado perplejos a muchos usuarios, ya que el nuevo editor carece de algunas de las funcionalidades presentes en versiones anteriores. Comprender las razones detrás de estos cambios puede aportar claridad y guiarnos en la personalización del editor según nuestras necesidades.

Por qué los Complementos Personalizados son Importantes

Los complementos personalizados son esenciales porque amplían la funcionalidad de TinyMCE, convirtiéndolo en una herramienta más potente para la gestión de contenidos. Ya sea que necesites opciones de formato avanzadas, incrustación de multimedia o manejo mejorado de imágenes, los complementos personalizados pueden ofrecer estas características. La ausencia de estos complementos en Magento 2.4.6 puede dificultar tu capacidad para gestionar contenidos de forma eficiente.

Guía Paso a Paso para Agregar Complementos Personalizados

Paso 1: Prepara tu Entorno

Antes de sumergirte en el código, asegúrate de tener las herramientas necesarias y el acceso:

  1. Acceso de Administrador de Magento: Debes tener privilegios de administrador para realizar cambios.
  2. Acceso FTP/SFTP: Acceso a los archivos de instalación de Magento a través de FTP o SFTP.
  3. Editor de Código: Un editor de código confiable como VSCode o Sublime Text.

Paso 2: Localiza el Archivo de Configuración de TinyMCE

Navega hasta la siguiente ruta para localizar la configuración de TinyMCE:

app/code/[Vendedor]/[Módulo]/view/adminhtml/web/js/tiny_mce/plugins.config.js

Aquí, [Vendedor] y [Módulo] son marcadores de posición para tus módulos de Magento específicos.

Paso 3: Modifica el Archivo de Configuración

Abre el archivo plugins.config.js en tu editor de código. Verás una estructura similar a esta:

tinymce.init({selector: 'textarea',plugins: 'lists link image charmap print preview hr anchor pagebreak',toolbar: 'insert | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat'});

Para agregar un nuevo complemento, inclúyelo en la lista de complementos y opciones de la barra de herramientas. Supongamos que quieres añadir un complemento de tabla:

tinymce.init({selector: 'textarea',plugins: 'lists link image charmap print preview hr anchor pagebreak table',toolbar: 'insert | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | removeformat'});

Paso 4: Sube los Archivos del Complemento

Si el complemento personalizado no es parte del paquete predeterminado de TinyMCE, deberás subirlo manualmente. Descarga el complemento deseado y coloca sus archivos en el siguiente directorio:

app/code/[Vendedor]/[Módulo]/view/adminhtml/web/js/tiny_mce/plugins/[nombre_del_complemento]

Asegúrate de que la estructura de directorios y los archivos del complemento coincidan con los requisitos de TinyMCE.

Paso 5: Borra la Caché y Despliega el Contenido Estático

Después de configurar y subir el complemento, limpia la caché de Magento y despliega el contenido estático:

php bin/magento cache:cleanphp bin/magento setup:static-content:deploy -f

Paso 6: Verifica los Cambios

Inicia sesión en tu panel de administración de Magento y navega a una página de contenido que utilice TinyMCE. Confirma que el nuevo complemento aparezca en la barra de herramientas del editor y funcione como se espera.

Estudio de Caso: Agregar el Complemento 'Tabla'

Veamos un ejemplo específico en el que añadimos el complemento 'tabla' a TinyMCE en Magento 2.4.6.

Configuración Inicial

Primero, verificamos la configuración actual de TinyMCE en nuestra instalación de Magento. Observamos la ausencia del complemento 'tabla' en la lista de complementos.

Cambio de Configuración

Añadimos 'tabla' a la configuración de complementos y la barra de herramientas en el archivo plugins.config.js:

plugins: 'lists link image charmap print preview hr anchor pagebreak table',toolbar: 'insert | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | removeformat'

Subir Archivos del Complemento

Dado que el paquete predeterminado de TinyMCE de Magento no incluía el complemento 'tabla', lo descargamos del repositorio oficial de TinyMCE y colocamos los archivos en el directorio especificado.

Limpieza de la Caché y Despliegue de Contenido Estático

Luego ejecutamos los siguientes comandos:

php bin/magento cache:cleanphp bin/magento setup:static-content:deploy -f

Verificación

Al revisar el panel de administración, confirmamos que el complemento 'tabla' estaba disponible y funcionaba correctamente.

Conclusión

La personalización de TinyMCE en Magento 2.4.6 puede restablecer la funcionalidad que necesitas para una gestión eficiente del contenido. Siguiendo los pasos detallados anteriormente, puedes agregar cualquier complemento personalizado, adaptando el editor a tus requerimientos específicos. Recuerda limpiar la caché y desplegar el contenido estático para ver los cambios. ¡Feliz personalización!

Preguntas Frecuentes

¿Cómo encuentro los archivos correctos del complemento?

Puedes descargar los archivos del complemento desde el repositorio oficial de TinyMCE u otras fuentes confiables. Asegúrate de que sean compatibles con tu versión de TinyMCE.

¿Qué debo hacer si un complemento no funciona?

Verifica que los archivos del complemento estén colocados y referenciados correctamente en el archivo de configuración. Revisa la consola del navegador en busca de errores y consulta la documentación de TinyMCE para obtener consejos de solución de problemas.

¿Puedo agregar varios complementos a la vez?

Sí, puedes agregar varios complementos enumerándolos en el archivo de configuración, separados por comas.

¿Hay una forma de revertir los cambios si algo sale mal?

Sí, siempre crea una copia de seguridad de tus archivos de configuración originales. Si algo sale mal, puedes revertir a la copia de seguridad y solucionar el problema.

¿Existen complementos recomendados para Magento?

Algunos complementos útiles incluyen 'mediaembed' para incrustar contenido multimedia, 'code' para resaltado de sintaxis y 'textcolor' para formateo avanzado de texto.