Issue #952💬 RespondidoAbierto el 15 de marzo de 2018por anand-gopinathReacciones 0

Generador de plantillas de correo responsivo usando Grapes js

Respuesta rápidapor artf

¿Es posible reducir el tamaño? No puedo hacer mucho al respecto, el tamaño es grande porque tuve que empaquetar el núcleo MJML dentro de él, ya que no hay un bundle del lado del cliente para él.¿Debería proceder con este MJML o crear mis propios componentes usando HTML/CSS personalizado como se mencionó en el segundo...

Lee la respuesta completa abajo ↓

Pregunta

@ateshuseyin @artf - Gracias por el gran plugin. Empezamos a usar Grapes js en nuestro proyecto como editor para crear plantillas de correo responsivas. Para lograr correos responsivos, tenemos dos opciones.

  1. MJML - https://mjml.io/ - trabajando en clientes de correo electrónicos importantes
  2. HTML/CSS personalizado - https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919 - Solo para algunos clientes. Pero no estoy seguro

Nuestro objetivo es desarrollar algo como este http://react-email-editor-demo.netlify.com/ usando Grapes js. Espero que podamos hacerlo. Pero antes de eso, conocí el lenguaje MJML y Grapejs también apoya eso. Pero tiene problemas importantes como,

  1. El repouso no tiene actividades recientes 2. Mencionaste algunos comentarios en el código como "// Actualmente la experiencia de usuario es demasiado mala con el enfoque de renderizado pesado" - como has dicho, se tarda más en volver a renderizar el DOM incluso para un solo cambio de estilo 3. La versión miniaturizada "grapesjs-mjml.min.js" es de gran tamaño (1,3 mb) 4. El analizador MJML es un motor pesado y tampoco es compatible con el navegador extensión en su nueva versión - https://github.com/mjmlio/mjml/issues/928 (Actualizo a un MJML4 reciente). Pero es una faena.
<img width="591" alt="captura de pantalla 2018-03-15 a las 1 59 32 pm" src="https://user-images.githubusercontent.com/25955939/37451983-4c4f2cf4-2859-11e8-96f0-e335cde8946d.png">

Así que, necesito algunas sugerencias de tu parte que,

  1. ¿Es posible reducir el tamaño?

  2. ¿Debería proceder con esto MJML o crear mis propios componentes usando HTML/CSS personalizado como se mencionó en el segundo punto? Si construir por su cuenta significa - Que hay que lograr todas las cosas... como hiciste en "Grapejs MJML"

  3. ¿Podemos eliminar el analizador MJML - (importar 'mjml2html' de 'mjml') y asignar ese código html generado como un componente personalizado? por ejemplo

  Formato MJML - <mjml><mjbody></mjbody></mjml>
HTML generado - <!--[if mso | IE]>..... bla bla bla....... <!--[si mso | IE]><![endif]-->

Aquí, ¿podemos crear un componente personalizado donde el "ComponetView" devuelva el HTML generado como está codificado de forma fija. (Pero es bastante imposible)

Así que estoy atascado con este enfoque y por favor, ayudadme con este @artf

Respuestas (2)

artf17 de marzo de 2018
  1. ¿Es posible reducir el tamaño?

No puedo hacer mucho al respecto, el tamaño es grande porque tuve que empaquetar el núcleo MJML dentro de él, ya que no hay un bundle del lado del cliente para él.

  1. ¿Debería proceder con este MJML o crear mis propios componentes usando HTML/CSS personalizado como se mencionó en el segundo punto? Si construir por su cuenta significa - Que hay que lograr todas las cosas... como hiciste en "Grapejs MJML"

Bueno, la elección depende de ti, sabes que con MJML puedes tener límites, con un enfoque personalizado tendrás más control pero replicarás las mismas funcionalidades de MJML, no es una tarea fácil (ni rápida)

  1. ¿Podemos eliminar el analizador MJML - (importar 'mjml2html' de 'mjml') y asignar ese código HTML generado como un componente personalizado

Lo mismo que antes: SÍ, puedes, pero requiere mucho esfuerzo.

lock[bot]17 de septiembre de 2019

Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.