mjml
mjml copied to clipboard
GrapesJS
Template export adds a html body tag in mjml code
Hi, im a newbie coder and im using Grapesjs in a react component. i am having troubles to export mjml and html code. When i click on export template button it add an extra
tag before and after mjml code. It seems to be the canvas wrapper. how can i prevent this issue?my console log display this error:
index.js:1 Uncaught Error: Malformed MJML. Check that your structure is correct and enclosed in <mjml> tags.
thats my code:
`import React, {useState, useEffect} from 'react'; import * as grapesjs from 'grapesjs';
import grapesJSMJML from 'grapesjs-mjml'
import {useParams} from 'react-router-dom' import { API_HOST } from './api_utils';
const Editor = () => { const [editor, setEditor] = useState(null); const pageId = useParams(); console.log('params editor :>>', pageId )
useEffect(() => {
const editor =grapesjs.init({
id:"#editor",
noticeOnUnload: 0,
container:"#editor",
avoidInlineStyle : false,
fromElement: true,
storageManager:{
type: "remote",
stepsBeforeSave: 1,
contentTypeJson:true,
storeComponents:true,
storeStyles:true,
storeHtml:true,
storeCss: true,
headers: {
"Content-Type": "application/json",
},
id: "mycustom-",
urlStore: `${API_HOST}/${pageId.pageId}/content`,
urlLoad: `${API_HOST}/${pageId.pageId}/content`,
},
plugins: [grapesJSMJML],
pluginsOpts:{
grapesJSMJML:{
resetDevices: false,
overwriteExport: true,
resetStyleManager:true,
resetBlocks:true,
},
}
});
editor.DomComponents.clear()
editor.addComponents('<mjml><mj-body><mj-section></mj-section></mj-body></mjml>')
setEditor(editor);
}, []);
return (
and that is the export template modal:
This issue also happens to me. Check out this fiddle.
https://jsfiddle.net/zietbukuel/m1vcjgn5/2/
@zietbukuel I cant solve that yet, but i found another open soucer drag-and-drop email builder with a mjml output thats working fine for me. im using this version : https://github.com/m-Ryan/easy-email-demo but that is the main repo: https://github.com/arco-design/easy-email
Hi guys exact same problem for me using VueJS. Can't get rid of this body tag added. So mjml compilation fails. Hop it could be resolved soon.
This issue also happens to me. Check out this fiddle.
https://jsfiddle.net/zietbukuel/m1vcjgn5/2/
Hi I have the same issue but if you remove mjml tags in your example it will work.
@esafronov still not working, the tag is still present, which shouldn't be the case.
Same behavior. Resolved fixing previous version 18.0.3 on grapes.js
Html:
NodeJs: npm i [email protected]
In changelog v0.18.4 is suggested to override wrapper component.
editor.Components.addType('wrapper', {
model: {
defaults: {
tagName: 'div', // replace body to div
},
// And/or skip wrapper in the HTML output
toHTML: function(opts) {
return this.getInnerHTML(opts);
}
}
});
But it does not work for me, any suggestion?
In changelog v0.18.4 is suggested to override wrapper component.
editor.Components.addType('wrapper', { model: { defaults: { tagName: 'div', // replace body to div }, // And/or skip wrapper in the HTML output toHTML: function(opts) { return this.getInnerHTML(opts); } } });But it does not work for me, any suggestion?
Should be : tagName: 'mjml'
No, I have to remove body tag entirely.
It is like this:
<body>
<mjml>
<mj-head id="ilnn">
<mj-raw>
...
</mjml>
</body>
And it would be like this.
<mjml>
<mj-head id="ilnn">
<mj-raw>
...
</mjml>
The solution is to override wrapper component toHTML() method.
editor.getWrapper().toHTML = function(opts) {
return this.getInnerHTML(opts);
};
No, I have to remove body tag entirely.
It is like this:
<body> <mjml> <mj-head id="ilnn"> <mj-raw> ... </mjml> </body>And it would be like this.
<mjml> <mj-head id="ilnn"> <mj-raw> ... </mjml>The solution is to override wrapper component toHTML() method.
editor.getWrapper().toHTML = function(opts) { return this.getInnerHTML(opts); };
overriding toHTML was enough for me, this is my starting container
<div :id="id">
<mjml v-pre>
<mj-body>
<mj-section>
<mj-column>
<mj-text>Content</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
</div>
