Convert MJML to Grapesjs JSON data on server side #4840
-
|
Hi, I have MJML markup and I need to convert them to GrapesJs JSON My plan - If I copy the MJML and paste it into the Import MJML popup of the editor then I get the output and can also get the JSON but I wonder if this is possible in the backend so that I don't have to manually copy and paste the MJML and save hundreds of templates. I also saw this #3672 which is kind of similar to running GrapesJs on the server side. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
The main issue with the headless option is that it's still relies on DOM API for parsing that means you could init the editor with the MJML plugin but you would need something like jsdom in order to work. Here a quick example you can try directly on npm.runkit.com require("jsdom");
require("global-jsdom/register");
const grapesjs = require("grapesjs");
const grapesjsMjml = require("grapesjs-mjml").default;
const editor = grapesjs.init({ headless: true, plugins: [grapesjsMjml]});
editor.setComponents(`<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-image width="100px" src="/assets/img/logo-small.png"></mj-image>
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>`);
console.log('Project data', editor.getProjectData()); |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot !!! Although, if I am importing MJML manually in the modal and checking in the local storage for JSON then it is also storing all the styles. For Eg - If I convert the above MJML using your code then I get assets and style as empty arrays but if I import manually on the https://grapesjs.com/demo-mjml.html then in local storage I can see that assets and styles array are not empty. I wonder if that can be possible too?? |
Beta Was this translation helpful? Give feedback.
The main issue with the headless option is that it's still relies on DOM API for parsing that means you could init the editor with the MJML plugin but you would need something like jsdom in order to work.
Here a quick example you can try directly on npm.runkit.com