mjml

GRAPESJS MJML

Nécessite GRAPESJS V0.15.9 ou plus

Ce plugin permet l'utilisation de composants MJML à l'intérieur de l'environnement GRAPESJS. Les composants MJML sont rendus en temps réel en utilisant le compilateur V4 officiel (+ quelques simulations pour le faire fonctionner dans le navigateur), donc le résultat est presque, la même chose que l'utilisation de l'éditeur MJML en direct.

Démo

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

Options

Option	Description	Défaut
blocks	Quel bloc à ajouter	(tous)
block	Ajoutez des options de bloc personnalisées, en fonction de l'ID de bloc.	(blockId) => ({})
codeViewerTheme	Thème de la visionneuse de code.	hopscotch
customComponents	Liste des composants qui seront ajoutés à un par défaut	[]
importPlaceholder	Modèle MJML d'espace	''
imagePlaceholderSrc	Source d'image d'image	'https://via.placeholder.com/350x250/78c5d6/fff'
i18n	I18N objet contenant la langue plus d'informations	{}
mjmlParser	Instance MJML-Browser personnalisée. Permet d'étendre les fonctionnalités MJML ou d'ajouter des composants MJML personnalisés	(input: string | MJMLJsonObject, opt: MJMLParsingOptions) => MJMLParseResults
overwriteExport	Écraser la commande d'exportation par défaut	true
preMjml	Chaîne avant le MJML dans le code d'exportation	''
postMjml	Chaîne après le MJML dans le code d'exportation	''
resetBlocks	Nettoyez tous les blocs précédents si vrai	true
resetDevices	Nettoyez tous les appareils précédents et définissez-en un nouveau pour mobile	true
resetStyleManager	Réinitialisez le gestionnaire de style et ajoutez de nouvelles propriétés pour MJML	true
resetDevices	Nettoyez tous les appareils précédents et définissez-en un nouveau pour mobile	true
hideSelector	Masquer le gestionnaire de sélecteur par défaut	true
useXmlParser	Expérimental: Utilisez un analyseur XML au lieu de HTML. Cela devrait permettre d'importer des éléments MJML vides (sans étiquettes de fermeture) comme <mj-image/>	false
columnsPadding	Rembourrage de colonne (de cette façon, il est plus facile de sélectionner les colonnes)	10px 0
useCustomTheme	Chargez le thème préréglé personnalisé	true

Télécharger

• npm i grapesjs-mjml

Usage

 < 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 en utilisant les importations 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 Utilisation:

 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 }
      }
   } ,
} ) ;

Utilisation de la construction indépendante de Browser MJML

Dans le cas où vous avez votre propre version de MJML avec des composants personnalisés ou étendus, il est possible de remplacer l'analyseur MJML par défaut avec un composant personnalisé et de créer des composants GRAPESJS personnalisés.

Pour plus d'informations sur la façon de créer un composant MJML, vous pouvez visiter le dossier des composants ou vous pouvez aller sur DOCS.

 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 ,
        ]
      }
   } ,
} ) ; 

Développement

Cloner le référentiel

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

Installez-le

$ npm i

Démarrer le serveur de développement

$ npm start

Libération

1. Exécuter npm run v:patch pour baisser la version dans package.json et créer une balise git
2. Poussez le commit + nouvelle balise
3. Allez à Github et rédigez une nouvelle version
4. Sélectionnez la nouvelle balise et ajoutez quelques notes de version
5. Hit Publish, la version publiera automatiquement dans NPM

Licence

BSD 3-CLAUSE