mjml

Uva de uva mjml

Requiere uva GrapesJS V0.15.9 o superior

Este complemento permite el uso de componentes MJML dentro del entorno GrapesJS. Los componentes MJML se representan en tiempo real utilizando el compilador V4 oficial (+ algunos simulacros para que se ejecute en el navegador), por lo tanto, el resultado es, casi, lo mismo que usar el editor Live MJML.

Manifestación

Supported MJML components (using default mjml-browser parser): mj-mjml mj-head mj-body mj-wrapper mj-group mj-section mj-column mj-text mj-image mj-button mj-social mj-social-element mj-divider mj-spacer mj-style mj-font mj-hero mj-navbar mj-navbar-link mj-raw

Opción

Opción	Descripción	Por defecto
blocks	Que bloquea agregar	(todo)
block	Agregue opciones de bloque personalizadas, según el ID de bloque.	(blockId) => ({})
codeViewerTheme	Tema del visor de código.	hopscotch
customComponents	Lista de componentes que se agregarán a uno predeterminado	[]
importPlaceholder	Plantilla MJML de marcador de posición para el modal de importación	''
imagePlaceholderSrc	Fuente de marcador de posición de imagen	'https://via.placeholder.com/350x250/78c5d6/fff'
i18n	I18N Objeto que contiene lenguaje más información	{}
mjmlParser	Instancia de navegador MJML personalizado. Permite extender la funcionalidad MJML o agregar componentes MJML personalizados	(input: string | MJMLJsonObject, opt: MJMLParsingOptions) => MJMLParseResults
overwriteExport	Sobrescribir el comando de exportación predeterminado	true
preMjml	Cadena antes del MJML en el código de exportación	''
postMjml	Cadena después del MJML en el código de exportación	''
resetBlocks	Limpiar todos los bloques anteriores si es cierto	true
resetDevices	Limpiar todos los dispositivos anteriores y establecer uno nuevo para móvil	true
resetStyleManager	Restablecer el Administrador de estilo y agregar nuevas propiedades para MJML	true
resetDevices	Limpiar todos los dispositivos anteriores y establecer uno nuevo para móvil	true
hideSelector	Ocultar el Selector Manager predeterminado	true
useXmlParser	Experimental: use el analizador XML en lugar de HTML. Esto debería permitir la importación de elementos mjml nulo (sin etiquetas de cierre) como <mj-image/>	false
columnsPadding	Relleno de columna (de esta manera es más fácil seleccionar columnas)	10px 0
useCustomTheme	Tema preestablecido personalizado de carga	true

Descargar

• npm i grapesjs-mjml

Uso

 < link href =" path/to/grapes.min.css " rel =" stylesheet " />
< script src =" path/to/grapes.min.js " > </ script >
< script src =" path/to/grapesjs-mjml.min.js " > </ script >

< div id =" gjs " >
  < mjml >
    < mj-body >
      <!-- Your MJML body here -->
      < mj-section >
        < mj-column >
          < mj-text > My Company </ mj-text >
        </ mj-column >
      </ mj-section >
    </ mj-body >
  </ mjml >
</ div >

< script type =" text/javascript " >
  const editor = grapesjs . init ( {
      fromElement : true ,
      container : '#gjs' ,
      plugins : [ 'grapesjs-mjml' ] ,
      pluginsOpts : {
        'grapesjs-mjml' : { /* ...options */ }
      }
  } ) ;
</ script > 

O usando las importaciones de ESM:

 import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import grapesJSMJML from 'grapesjs-mjml'

grapesJS . init ( {
   fromElement : true ,
   container : '#gjs' ,
   plugins : [ grapesJSMJML ] ,
   pluginsOpts : {
      [ grapesJSMJML ] : { /* ...options */ }
   } ,
} ) ; 

I18N Uso:

 import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import nl from 'grapesjs/locale/nl'
import grapesJSMJML from 'grapesjs-mjml'
import mjmlNL from 'grapesjs-mjml/locale/nl'

grapesJS . init ( {
   fromElement : true ,
   container : '#gjs' ,
   i18n : {
      // locale: 'en', // default locale
      // detectLocale: true, // by default, the editor will detect the language
      // localeFallback: 'en', // default fallback
      messages : { nl : nl } ,
   } ,
   plugins : [ grapesJSMJML ] ,
   pluginsOpts : {
      [ grapesJSMJML ] : {
        // Optional options
        i18n : { nl : mjmlNL }
      }
   } ,
} ) ;

Uso de la construcción de navegador MJML independiente

En caso de que tenga su propia versión de MJML con componentes personalizados o extendidos, es posible anular el analizador MJML predeterminado con uno personalizado y crear componentes de GrapesJS personalizados.

Para obtener más información sobre cómo crear un componente MJML, puede visitar la carpeta de Componentes o puede ir a los documentos.

 import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import grapesJSMJML from 'grapesjs-mjml'
import customMjmlParser from 'custom-mjml-parser' ;

import customImage from 'custom/components/path'

grapesJS . init ( {
   fromElement : true ,
   container : '#gjs' ,
   plugins : [ grapesJSMJML ] ,
   pluginsOpts : {
      [ grapesJSMJML ] : {
        mjmlParser : customMjmlParser ,
        customComponents : [
          customImage ,
        ]
      }
   } ,
} ) ; 

Desarrollo

Clonar el repositorio

$ git clone https://github.com/GrapesJS/mjml.git
$ cd mjml

Instalarlo

$ npm i

Iniciar el servidor de desarrollo

$ npm start

Lanzamiento

1. Ejecutar npm run v:patch para aumentar la versión en paquete.json y crear una etiqueta git
2. Empuje el compromiso + etiqueta nueva
3. Ir a Github y redactar un nuevo lanzamiento
4. Seleccione la nueva etiqueta y agregue algunas notas de versión
5. Hit Publish, la versión se publicará automáticamente en NPM

Licencia

BSD 3 Cláusula