Comments (2)
OK, so self closing tags is a known issue and a tough one at that. Currently seems like the only way around it is not to use self closing tags.
For us, there were two problematic entry points:
- When importing MJML - core grapesjs-mjml
- When using fromElement to load MJML - core grapesjs-mjml
- When saving MJML - Our own action to save the MJML so that users may edit later
The work around we use was to run the MJML through a simple script that converts self closing tags to normal ones. See below.
// Get the MJML from the editor
let selfMJMLOriginal = editor.getHtml();
// Parse and convert all self-closing tags.
function removeSelfClosingTags(selfClosingMJML) {
let split = selfClosingMJML.split("/>");
let convertedHtml = "";
for (let i = 0; i < split.length - 1;i++) {
let edsplit = split[i].split("<");
convertedHtml += split[i] + "></" + edsplit[edsplit.length - 1].split(" ")[0] + ">";
}
return convertedHtml + split[split.length-1];
}
// Run the MJML through the script
let outputMJML = removeSelfClosingTags(selfMJMLOriginal)
You can apply the same script to the import function in command-import-mjml.js
btnImp.onclick = () => {
let selfMJMLOriginal = codeViewer.editor.getValue();
editor.DomComponents.getWrapper().set('content', '');
// Script to parse and close all self closing tags.
function removeSelfClosingTags(selfClosingMJML) {
//See above
}
let code = removeSelfClosingTags(selfMJMLOriginal)
editor.setComponents(code.trim());
editor.Modal.close();
};
Open to more elegant solutions.
from mjml.
closing this as we already have an issue for self-closing tags: #149
from mjml.
Related Issues (20)
- BUG : edit text on mj-text after set background-color doesn't work HOT 2
- mj-navbar and CKEditor HOT 3
- Default width is not working properly in current version HOT 4
- BUG : Navbar link render twice when paste text into in the demo link
- Image size does not respect specified units HOT 1
- mjml in react encountered a problem,it can not draggle
- Mjml in react,Component cant't draggable HOT 9
- Does the MJML plug-in have an api for converting html to mjml? HOT 2
- Conditional template?
- BUG: The text link pop-up window does not pop up when it is full screen HOT 1
- Question: How to add the custom action(variable) HOT 3
- BUG: Borders missing after dropping components over it
- BUG: Found a Bug in MJML Image Block HOT 5
- Question: Does mjml support body component to configure background image?
- MJML plugin no longer working
- adding mj-styles or mj-head if they don't exist
- Selector Manager (Classes) disappeared in Style Manager HOT 2
- Table creation drag and drop issue
- Set HTML with style in component
- Get the rendered html from the editor? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mjml.