0.2.5 • Published 4 years ago
@keethealth/grapesjs-mjml v0.2.5
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.
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
Option | Description | Default | |
---|---|---|---|
categoryLabel | Category for blocks | '' | |
importPlaceholder | Import placeholder MJML | '' | |
modalTitleImport | Title for the import modal | Import MJML | |
modalBtnImport | Test for the import button | Import | |
modalLabelImport | Description for the import modal | '' | |
modalTitleExport | Title for the export modal | Export MJML | |
modalLabelExport | Description for the export modal | '' | |
overwriteExport | Overwrite default export command | true | |
preMjml | String before the MJML in export code | '' | |
postMjml | String after the MJML in export code | '' | |
resetBlocks | Clean all previous blocks if true | true | |
resetDevices | Clean all previous devices and set a new one for mobile | true | , |
resetStyleManager | Reset the Style Manager and add new properties for MJML | true | , |
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