mjml

GRAPESJS MJML

Requer uvasjs v0.15.9 ou superior

Este plug -in permite o uso de componentes MJML dentro do ambiente de uvasjs. Os componentes MJML são renderizados em tempo real usando o compilador V4 oficial (+ algumas zombares para fazê-lo no navegador), portanto, o resultado é, quase, o mesmo que usar o editor MJML Live.

Demonstração

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

Opções

Opção	Descrição	Padrão
blocks	Que bloqueia para adicionar	(todos)
block	Adicione opções de bloco personalizado, com base no ID do bloco.	(blockId) => ({})
codeViewerTheme	Tema do visualizador de código.	hopscotch
customComponents	Lista de componentes que serão adicionados ao padrão	[]
importPlaceholder	Modelo MJML de espaço reservado para o modal de importação	''
imagePlaceholderSrc	Fonte de espaço reservado para imagem	'https://via.placeholder.com/350x250/78c5d6/fff'
i18n	Objeto i18n contendo linguagem mais informações	{}
mjmlParser	Instância personalizada do navegador MJML. Permite estender a funcionalidade MJML ou adicionar componentes MJML personalizados	(input: string | MJMLJsonObject, opt: MJMLParsingOptions) => MJMLParseResults
overwriteExport	Substituir o comando de exportação padrão	true
preMjml	String antes do MJML no código de exportação	''
postMjml	String após o MJML no código de exportação	''
resetBlocks	Limpe todos os blocos anteriores se verdadeiro	true
resetDevices	Limpe todos os dispositivos anteriores e defina um novo para celular	true
resetStyleManager	Redefinir o gerenciador de estilo e adicionar novas propriedades para MJML	true
resetDevices	Limpe todos os dispositivos anteriores e defina um novo para celular	true
hideSelector	Ocultar o gerente seletor padrão	true
useXmlParser	Experimental: use o analisador XML em vez de HTML. Isso deve permitir a importação de elementos Void MJML (sem tags de fechamento) como <mj-image/>	false
columnsPadding	Preenchimento de coluna (dessa maneira é mais fácil selecionar colunas)	10px 0
useCustomTheme	Carregar o tema predefinido personalizado	true

Download

• 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 > 

Ou usando as importações 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 }
      }
   } ,
} ) ;

Usando a compilação independente de navegador MJML

Caso você tenha sua própria versão do MJML com componentes personalizados ou estendidos, é possível substituir o analisador MJML padrão pelo Custom One e criar componentes de uvasjs personalizados.

Para obter mais informações sobre como criar componente MJML, você pode visitar a pasta Componentes ou ir aos 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 ,
        ]
      }
   } ,
} ) ; 

Desenvolvimento

Clone o repositório

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

Instale

$ npm i

Inicie o servidor de desenvolvimento

$ npm start

Liberação

1. Execute npm run v:patch to Bump the Version no package.json e crie uma tag git
2. Empurre o commit + nova tag
3. Vá para o Github e convoce um novo lançamento
4. Selecione a nova tag e adicione algumas notas de lançamento
5. Hit Publish, o lançamento publicará automaticamente no NPM

Licença

BSD 3-cláusulas