mjml

GRAPESJS MJML

Erfordert GrapesJs v0.15.9 oder höher

Dieses Plugin ermöglicht die Verwendung von MJML -Komponenten in der GrapesJS -Umgebung. MJML-Komponenten werden in Echtzeit unter Verwendung des offiziellen V4-Compilers (+ einige Mocke, um ihn im Browser zu betreiben) gerendert. Daher ist das Ergebnis fast die gleiche wie die Verwendung des MJML Live-Editors.

Demo

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

Optionen

Option	Beschreibung	Standard
blocks	Welche Blöcke hinzufügen sollen	(alle)
block	Fügen Sie benutzerdefinierte Blockoptionen basierend auf der Block -ID hinzu.	(blockId) => ({})
codeViewerTheme	Code -Viewer -Thema.	hopscotch
customComponents	Liste der Komponenten, die zu einem Standard hinzugefügt werden	[]
importPlaceholder	Platzhalter MJML -Vorlage für das Importmodal	''
imagePlaceholderSrc	Image -Platzhalterquelle	'https://via.placeholder.com/350x250/78c5d6/fff'
i18n	I18N -Objekt, das Sprache enthält weitere Informationen	{}
mjmlParser	Benutzerdefinierte MJML-Browser-Instanz. Ermöglicht die Erweiterung der MJML -Funktionalität oder das Hinzufügen von benutzerdefinierten MJML -Komponenten	(input: string | MJMLJsonObject, opt: MJMLParsingOptions) => MJMLParseResults
overwriteExport	Überschreiben Sie den Standard -Exportbefehl für den Standard	true
preMjml	Zeichenfolge vor dem MJML im Exportcode	''
postMjml	String nach dem MJML im Exportcode	''
resetBlocks	Reinigen Sie alle vorherigen Blöcke, wenn wahr	true
resetDevices	Reinigen Sie alle früheren Geräte und stellen Sie eine neue für Mobilgeräte ein	true
resetStyleManager	Setzen Sie den Style Manager zurück und fügen Sie neue Eigenschaften für MJML hinzu	true
resetDevices	Reinigen Sie alle früheren Geräte und stellen Sie eine neue für Mobilgeräte ein	true
hideSelector	Verstecken Sie den Standard -Selektormanager	true
useXmlParser	Experimentell: Verwenden Sie den XML -Parser anstelle von HTML. Dies sollte das Import von void MJML-Elementen (ohne Schließen von Tags) wie <mj-image/> ermöglichen	false
columnsPadding	Spaltenpolsterung (Auf diese Weise ist es einfacher, Spalten auszuwählen)	10px 0
useCustomTheme	Laden Sie das benutzerdefinierte voreingestellte Thema	true

Herunterladen

• npm i grapesjs-mjml

Verwendung

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

Oder verwenden ESM -Importe:

 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 Nutzung:

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

Verwendung unabhängiger MJML-Browser-Build

Falls Sie eine eigene Version von MJML mit benutzerdefinierten oder erweiterten Komponenten haben, können Sie den Standard -MJML -Parser mit benutzerdefinierten Bestandteilen überschreiben und benutzerdefinierte Traubenjs -Komponenten erstellen.

Für weitere Informationen zum Erstellen von MJML -Komponenten können Sie den Ordner des Komponenten besuchen oder zu Dokumenten gehen.

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

Entwicklung

Klonen Sie das Repository

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

Installieren Sie es

$ npm i

Starten Sie den Entwicklerserver

$ npm start

Freigeben

1. Führen Sie npm run v:patch aus, um die Version in package.json zu stoßen und ein Git -Tag zu erstellen
2. Drücken Sie das Komitee + neues Tag
3. Gehen Sie zu Github und entwerfen Sie eine neue Veröffentlichung
4. Wählen Sie das neue Tag und fügen Sie einige Versionsnotizen hinzu
5. Hit Publish, die Veröffentlichung wird automatisch an NPM veröffentlichen

Lizenz

BSD 3-Klausel