0.2.5 • Published 4 years ago

@keethealth/grapesjs-mjml v0.2.5

Weekly downloads
60
License
BSD-3-Clause
Repository
github
Last release
4 years ago

GrapesJS MJML

Requires GrapesJS v0.14.62 or higher

This plugin enables the usage of MJML components inside the GrapesJS environment. MJML components are rendered in real-time using the official v4 compiler (+ some mocks to make it run in the browser), therefore the result is, almost, the same as using the MJML Live Editor.

Demo

Supported components: mj-wrapper mj-group mj-section mj-column mj-text mj-image mj-button mj-social mj-divider mj-spacer mj-style mj-font mj-hero

Options

OptionDescriptionDefault
categoryLabelCategory for blocks''
importPlaceholderImport placeholder MJML''
modalTitleImportTitle for the import modalImport MJML
modalBtnImportTest for the import buttonImport
modalLabelImportDescription for the import modal''
modalTitleExportTitle for the export modalExport MJML
modalLabelExportDescription for the export modal''
overwriteExportOverwrite default export commandtrue
preMjmlString before the MJML in export code''
postMjmlString after the MJML in export code''
resetBlocksClean all previous blocks if truetrue
resetDevicesClean all previous devices and set a new one for mobiletrue,
resetStyleManagerReset the Style Manager and add new properties for MJMLtrue,

Download

  • 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">
  var editor = grapesjs.init({
      fromElement: 1,
      container : '#gjs',
      plugins: ['grapesjs-mjml'],
      pluginsOpts: {
        'grapesjs-mjml': {/* ...options */}
      }
  });
</script>

Or using ESM imports:

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

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

Development

Clone the repository

$ git clone https://github.com/artf/grapesjs-mjml.git
$ cd grapesjs-mjml

Install it

$ npm i

Start the dev server

$ npm start

License

BSD 3-Clause