Editor de Texto Enriquecido para Emails (TinyMCE)
El cuerpo de cada mensaje de recordatorio se edita mediante un completo editor de texto enriquecido powered by TinyMCE, para que puedas dar formato al texto, añadir enlaces e insertar variables de plantilla sin tocar el HTML directamente.
Disponible desde v1.0.0
Descripción general
Cuando abres un mensaje de recordatorio para añadirlo o editarlo, el campo Mensaje a enviar en el email se convierte en un lienzo de edición visual con una barra de herramientas de formato. El editor se ejecuta en tu navegador y guarda el contenido como HTML, que luego se fusiona con la plantilla envolvente del email cada vez que se envía un recordatorio.
El editor es la integración nativa de TinyMCE en PrestaShop, por lo que se comporta igual que el editor de descripción de productos o de páginas CMS que puede que ya uses. La barra de herramientas y los controles exactos dependen de tu versión de PrestaShop: PS 1.7 y PS 8 cargan TinyMCE a través del wrapper tinySetup() de PrestaShop; PS 1.6 carga TinyMCE 3 directamente con su tema "Advanced" y un diseño de barra de herramientas ligeramente distinto.
Un detalle técnico importante que te afecta: el editor está configurado para almacenar el contenido con codificación de entidades sin procesar. Esto significa que los marcadores de posición entre llaves como {completename} o {totalamount} se guardan exactamente tal y como los escribes — no se convierten en entidades HTML — para que el módulo pueda sustituirlos por valores reales en el momento del envío.
Configuración
El editor está integrado en el formulario de mensajes de recordatorio — no existe una opción separada para activarlo o desactivarlo. Se activa automáticamente cada vez que abres el campo del cuerpo del mensaje.
- Ve a Módulos > Gestor de módulos, encuentra Order Payment Reminders Pro y haz clic en Configurar.
- Desplázate hasta la sección Mensajes y haz clic en Editar junto a un recordatorio existente, o en Añadir nuevo mensaje.
- Se abre el formulario del mensaje. El campo Mensaje a enviar en el email carga el editor TinyMCE una vez que el JavaScript de la página termina de ejecutarse — espera a que aparezca la barra de herramientas antes de empezar a escribir.
Si ves un área de texto sin formato en lugar de una barra de herramientas, el JavaScript de la página no terminó de cargarse. Recarga la página e inténtalo de nuevo. Asegúrate de que ninguna extensión del navegador esté bloqueando scripts de tu dominio del Back Office.
El editor también está presente en el asistente de configuración si realizas la configuración inicial guiada.
Ajustes del editor aplicados por el módulo
El módulo fija los siguientes ajustes de TinyMCE. No puedes cambiarlos desde el Back Office:
| Ajuste | Valor | Por qué es importante |
|---|---|---|
| Formato de elemento | html | El contenido se guarda como HTML, no como XHTML |
| Codificación de entidades | raw | Los marcadores entre llaves como {completename} se almacenan literalmente, sin codificación HTML |
| Permitir HTML en anclas con nombre | activado | Necesario para los enlaces de anclaje dentro del HTML del email |
| Selector del editor | autoload_rte | El editor se activa únicamente en el campo del cuerpo del mensaje, no en otras áreas de texto de la página |
Cómo funciona
Escribir y dar formato a tu mensaje
Escribe directamente en el lienzo del editor como lo harías en cualquier procesador de texto. Usa los botones de la barra de herramientas para aplicar formato:
| Control de la barra de herramientas | Qué hace |
|---|---|
| N / K / S | Negrita, cursiva, subrayado |
| Tachado | Tachar texto |
| Botones de alineación | Alinear a la izquierda, centrar, a la derecha o justificado |
| Formato / Fuente / Tamaño | Aplicar niveles de encabezado (H1–H4) o cambiar el tamaño de fuente |
| Color de texto / fondo | Cambiar el color del texto o resaltar |
| Lista con viñetas / numerada | Crear listas desordenadas u ordenadas |
| Sangría / Reducir sangría | Desplazar elementos de lista o párrafos |
| Deshacer / Rehacer | Retroceder o avanzar por los cambios (Ctrl+Z / Ctrl+Y) |
| Pantalla completa | Expandir el editor para que ocupe la ventana del navegador — útil para mensajes largos |
Los atajos de teclado funcionan dentro del lienzo: Ctrl+B para negrita, Ctrl+I para cursiva, Ctrl+K para insertar enlace.
Insertar variables de plantilla
Las variables de plantilla son marcadores de posición en texto plano — las escribes directamente en el lienzo y el módulo las sustituye por valores reales al enviar cada email.
- Coloca el cursor donde quieras que aparezca la variable.
- Escribe el nombre de la variable entre llaves, por ejemplo
{completename}o{totalamount}. - El marcador aparece como texto literal en el lienzo del editor. Eso es correcto — aquí no se mostrará como un valor real.
Debajo del editor aparece una lista de referencia Variables disponibles que se puede contraer y expandir. Haz clic en el encabezado para desplegarla y ver todos los nombres de variables con sus descripciones. Para la lista completa, consulta Variables de plantilla de email.
Los nombres de las variables distinguen entre mayúsculas y minúsculas.
{totalamount}funciona;{TotalAmount}no. Copia siempre el nombre de la variable exactamente como aparece en la lista de referencia.
Insertar un enlace
- Selecciona el texto que quieres convertir en enlace.
- Haz clic en el botón Insertar/Editar enlace (icono de cadena) en la barra de herramientas.
- Introduce la URL completa en el cuadro de diálogo, por ejemplo
https://tutienda.com/pedido. - Establece Destino en Abrir en nueva ventana si quieres que el enlace se abra en una nueva pestaña.
- Haz clic en Insertar para confirmar.
Para eliminar un enlace, coloca el cursor dentro de él y haz clic en el botón Eliminar enlace (icono de cadena rota).
Cambiar a la vista de código HTML
- Haz clic en el botón Código fuente (
< >o HTML en versiones anteriores de PS) en la barra de herramientas. - El lienzo cambia a un área de texto HTML sin formato.
- Realiza tus ediciones directamente en HTML.
- Vuelve a hacer clic en el mismo botón (o en Actualizar, según tu versión de PS) para regresar al lienzo visual.
Usa la vista de código fuente para pegar un bloque HTML prediseñado, eliminar etiquetas <span> o <font> no deseadas que hayan quedado de un pegado, o verificar que un marcador de variable esté escrito correctamente.
Pegar contenido desde Word o Google Docs
Pegar texto enriquecido directamente suele arrastrar CSS oculto o marcado de Microsoft Office que rompe el renderizado del email. Usa el botón Pegar como texto plano (portapapeles con una "T") antes de pegar:
- Haz clic en Pegar como texto plano para que el botón quede activo/resaltado.
- Pega (
Ctrl+V/Cmd+V). El editor elimina todo el formato externo. - Vuelve a aplicar el formato que necesites usando la barra de herramientas.
Alternativamente, pega con normalidad y luego selecciona todo el texto y haz clic en Eliminar formato (icono de borrador) para quitar los estilos en línea.
Añadir imágenes
El editor incluye un botón Insertar/Editar imagen, pero los emails de recordatorio son emails HTML enviados desde tu servidor. Para que las imágenes aparezcan en las bandejas de entrada de los destinatarios, deben estar alojadas en una URL públicamente accesible.
- Aloja tu imagen en el servidor multimedia de tu tienda, una CDN o un servicio de alojamiento de imágenes público.
- Haz clic en el botón Insertar/Editar imagen en la barra de herramientas.
- Pega la URL pública completa (que empiece por
https://) en el campo Fuente. - Añade un Texto alternativo descriptivo para los clientes de email que bloqueen imágenes.
- Haz clic en Guardar.
No pegues imágenes codificadas en base64. La mayoría de los clientes de email las eliminan o marcan el email como spam. Usa únicamente URLs alojadas.
Las plantillas de email prediseñadas del módulo usan {shop_logo} — una variable que se sustituye por la URL del logotipo de tu tienda en el momento del envío — en lugar de una ruta de imagen codificada. Usar {shop_logo} en tu cabecera es el enfoque recomendado.
Cómo se guarda el contenido del editor
Cuando haces clic en Guardar en el formulario del mensaje, el resultado HTML del editor se almacena en la base de datos. A continuación, el módulo inserta este HTML en la plantilla envolvente del email (el archivo que contiene {wr_title} y {wr_message}) cada vez que se envía un recordatorio coincidente. Las etiquetas <p></p> vacías que TinyMCE añade a veces se eliminan automáticamente antes de guardar.
Ejemplos de uso
Ejemplo: Añadir un recordatorio de plazo de pago con énfasis en negrita
Quieres recordar a los clientes que su pedido será cancelado en 3 días. En el lienzo del editor, escribe tu mensaje, selecciona la frase "3 días" y haz clic en N en la barra de herramientas. El texto se guarda como <strong>3 días</strong> y se muestra en negrita en los clientes de email de los destinatarios. Añade {daysleft} en lugar del número literal para que el valor sea siempre preciso por pedido.
Ejemplo: Crear una lista estructurada de instrucciones de pago
Quieres incluir los pasos de una transferencia bancaria en el email. Escribe cada paso en una nueva línea, selecciónalos todos y haz clic en el botón Lista numerada. Luego añade un hipervínculo en "los datos de tu cuenta bancaria" que apunte a una página de tu tienda. Cambia a la vista de código fuente después para confirmar que el HTML tiene buen aspecto antes de guardar.
Ejemplo: Pegar una plantilla HTML prediseñada
Has creado un bloque HTML de email en una herramienta externa. Abre el editor, haz clic en el botón Código fuente, selecciona todo el HTML existente y pega tu bloque. Vuelve a hacer clic en el botón de código fuente para regresar al modo visual y comprobar el diseño. Inserta {completename} y {totalamount} en los puntos apropiados y guarda.
Notas importantes
- El editor reconoce el idioma. Si tu tienda tiene varios idiomas activos, el formulario del mensaje muestra una pestaña de idioma para cada uno. El editor se activa para la pestaña del idioma seleccionada en ese momento — cambia entre pestañas y edita cada idioma de forma independiente.
- Aplicar una plantilla de email prediseñada desde el selector de plantillas reemplaza todo el cuerpo del mensaje, incluido cualquier formato personalizado que ya hayas añadido. Elige siempre tu plantilla primero y luego aplica el formato y las ediciones de variables.
- El campo del asunto es una entrada de texto plano — TinyMCE no se aplica a él. No pegues HTML en el campo del asunto.
- La configuración de TinyMCE de PrestaShop aplica un filtro de seguridad de contenido. Los bloques
<script>en línea y las secciones<style>en el<head>se eliminarán al guardar. Usa atributosstyle=""en línea sobre los elementos individuales en su lugar. - El módulo es compatible con PS 1.5+ y PS 1.6+. PS 1.6 usa TinyMCE 3 con un diseño de barra de herramientas ligeramente diferente (más botones en la segunda fila, sin controlador de redimensionado por arrastre en compilaciones antiguas).
- Multishop: el contenido de los mensajes se almacena por tienda. El editor funciona de la misma manera independientemente del contexto de tienda en el que te encuentres.
Solución de problemas
| Problema | Solución |
|---|---|
| El editor se muestra como un área de texto plano en lugar de una barra de herramientas | El JavaScript de la página no se cargó completamente. Recarga la página. Si persiste, revisa la consola del navegador en busca de errores y confirma que ninguna extensión del navegador está bloqueando scripts de tu dominio del Back Office. |
| El contenido se guarda pero el email muestra etiquetas HTML sin procesar | Es posible que el HTML haya acabado en el campo del asunto, que es texto plano. Confirma que el contenido formateado está en el campo Mensaje a enviar en el email, no en el asunto. |
El marcador de variable como {completename} aparece como texto literal en los emails recibidos | El marcador está mal escrito. Cambia a la vista de código HTML y compara el marcador carácter a carácter con la lista de referencia que aparece debajo del editor. Comprueba si hay espacios de más, mayúsculas incorrectas o llaves que faltan. |
| El contenido pegado se ve mal en los emails recibidos | El pegado incluyó CSS externo o marcado de Office. Cambia a la vista de código fuente y elimina los atributos style=, o vuelve a pegar usando Pegar como texto plano. |
| Las imágenes no aparecen para los destinatarios del email | La URL de la imagen no es públicamente accesible. Abre la URL en una ventana de incógnito del navegador para verificarlo. Sustituye las rutas relativas (/img/...) por URLs absolutas completas (https://tutienda.com/img/...). |
| El editor no aparece en el asistente de configuración | El paso del asistente inicializa TinyMCE tras completar su animación. Si el editor sigue sin aparecer después de que cargue el paso, desplázate hacia abajo y haz clic en otro lugar de la página — el editor puede necesitar un momento en conexiones más lentas. |
| Tras guardar, al reabrir el formulario se muestra el contenido antiguo | Es posible que hayas navegado fuera de la página antes de que apareciera la confirmación de guardado. Comprueba la lista de Mensajes para confirmar qué versión se guardó. El contenido solo se actualiza cuando haces clic en Guardar y ves el banner de confirmación. |
Preguntas frecuentes
¿Puedo escribir un email de texto plano sin formato?
Sí. Escribe directamente en el lienzo del editor sin usar ningún botón de la barra de herramientas y el módulo guardará tu texto como etiquetas <p> simples. La mayoría de los clientes de email lo renderizarán como texto sin formato aparente. No hay una parte de texto plano separada que configurar — el módulo envía un único email HTML.
¿Se perderá mi formato si aplico una de las plantillas de email prediseñadas?
Sí. Aplicar una plantilla prediseñada desde el selector de plantillas reemplaza todo el cuerpo del mensaje. Elige tu plantilla primero y luego añade el formato y las ediciones de variables — no al revés.
¿Puedo usar tablas HTML para la maquetación?
Sí. Cambia a la vista de código fuente y pega el marcado de tu tabla directamente. El editor conserva las etiquetas estándar <table>, <tr>, <td> y los atributos de estilo en línea style="". Evita los nombres de clase CSS que hagan referencia al tema de tu tienda — esos selectores no existirán en los clientes de email de los destinatarios.
¿Por qué funcionan las variables entre llaves como {completename} si el HTML normalmente escapa las llaves?
El módulo configura el editor con entity_encoding: "raw", lo que indica a TinyMCE que almacene las llaves y otros caracteres literalmente en lugar de convertirlos en entidades HTML. Esto se aplica automáticamente — no necesitas hacer nada especial.
¿Tengo que introducir un mensaje separado para cada idioma?
Sí. El cuerpo del mensaje es traducible. Si tu tienda tiene varios idiomas activos, el formulario muestra una pestaña de idioma para cada uno. Cambia entre pestañas y edita el mensaje de forma independiente para cada idioma. El editor está activo para la pestaña que estés viendo en ese momento.
¿Qué ocurre si guardo con el cuerpo del mensaje vacío?
El módulo guarda un cuerpo vacío. Cuando se ejecute el cron, el email se enviará sin contenido visible en el cuerpo — solo aparecerán la plantilla envolvente del email y el asunto. Introduce siempre el contenido del mensaje antes de activar un recordatorio.