|
|
|
@ -2,13 +2,14 @@ |
|
|
|
<html lang="en"> |
|
|
|
<head> |
|
|
|
<meta charset="utf-8"> |
|
|
|
<title>GrapesJS MJML Newsletter Builder</title> |
|
|
|
<meta name="description" content="GrapesJS MJML Newsletter Builder - Next generation tool for building newsletters without coding"> |
|
|
|
<title>GrapesJS Demo - Free Open Source MJML Newsletter Builder</title> |
|
|
|
<meta name="description" content="GrapesJS MJML Newsletter Builder - Best Free Open Source Responsive MJML Newsletter Editor"> |
|
|
|
<meta name="keywords" content="newsletter builder, web template editor, html builder, html editor"> |
|
|
|
<link rel="stylesheet" href="./stylesheets/grapes.min.css"> |
|
|
|
<link rel="stylesheet" href="./stylesheets/tooltip.css"> |
|
|
|
<link rel="stylesheet" href="./stylesheets/toastr.min.css"> |
|
|
|
<link rel="stylesheet" href="./stylesheets/grapesjs-mjml.css"> |
|
|
|
<link rel="stylesheet" href="stylesheets/demos.css"> |
|
|
|
|
|
|
|
<script src="js/grapes.min.js"></script> |
|
|
|
<script src="./js/toastr.min.js"></script> |
|
|
|
@ -24,54 +25,16 @@ |
|
|
|
|
|
|
|
</head> |
|
|
|
<style> |
|
|
|
body, html{ |
|
|
|
height: 100%; |
|
|
|
margin: 0; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
#gjs-pn-commands, |
|
|
|
.gjs-clm-tags { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
.info-link { |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
|
|
|
|
#info-cont { |
|
|
|
line-height: 17px; |
|
|
|
} |
|
|
|
|
|
|
|
.grapesjs-logo { |
|
|
|
display: block; |
|
|
|
height: 90px; |
|
|
|
margin: 0 auto; |
|
|
|
width: 90px; |
|
|
|
} |
|
|
|
|
|
|
|
.grapesjs-logo path{ |
|
|
|
stroke: #eee !important; |
|
|
|
stroke-width: 8 !important; |
|
|
|
} |
|
|
|
|
|
|
|
/* Toast style */ |
|
|
|
#toast-container { |
|
|
|
font-size: 13px; |
|
|
|
font-weight: lighter; |
|
|
|
} |
|
|
|
#toast-container > div, |
|
|
|
#toast-container > div:hover { |
|
|
|
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); |
|
|
|
font-family: Helvetica, sans-serif; |
|
|
|
} |
|
|
|
#toast-container > div{ |
|
|
|
opacity: 0.95; |
|
|
|
.gjs-four-color { |
|
|
|
color: #f45e43; |
|
|
|
} |
|
|
|
|
|
|
|
#gjs-pn-devices-c { |
|
|
|
width: 85%; |
|
|
|
z-index: 1; |
|
|
|
.gjs-logo-version { |
|
|
|
background-color: #4b4e54; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<body> |
|
|
|
@ -152,23 +115,37 @@ |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div id="info-cont" style="display:none"> |
|
|
|
<div id="info-panel" style="display:none"> |
|
|
|
<br/> |
|
|
|
<svg class="grapesjs-logo" xmlns="http://www.w3.org/2000/svg" version="1"><g id="gjs-logo"><path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:10;stroke:#fff"/></g></svg> |
|
|
|
<svg class="info-panel-logo" xmlns="http://www.w3.org/2000/svg" version="1"><g id="gjs-logo"><path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:10;stroke:#fff"/></g></svg> |
|
|
|
<br/> |
|
|
|
<div class="gjs-import-label"> |
|
|
|
<div class="info-panel-label"> |
|
|
|
<b>GrapesJS MJML Newsletter Builder</b> was made not only to show what is possible to achive with the |
|
|
|
<a class="info-link gjs-color-active" target="_blank" href="http://artf.github.io/grapesjs/">GrapesJS</a> |
|
|
|
<a class="info-panel-link gjs-four-color" target="_blank" href="http://artf.github.io/grapesjs/">GrapesJS</a> |
|
|
|
core library, but also to help non-tech people build responsive cross-platform newsletters using the amazing |
|
|
|
<a class="info-link gjs-color-active" target="_blank" href="https://mjml.io">MJML</a> markup language |
|
|
|
<a class="info-panel-link gjs-four-color" target="_blank" href="https://mjml.io">MJML</a> markup language |
|
|
|
<br/><br/> |
|
|
|
For any problem with the builder, open an issue on the main |
|
|
|
<a class="info-link gjs-color-active" target="_blank" href="https://github.com/artf/grapesjs">GrapesJS repository</a>. |
|
|
|
<a class="info-panel-link gjs-four-color" target="_blank" href="https://github.com/artf/grapesjs">GrapesJS repository</a>. |
|
|
|
<br/><br/> |
|
|
|
Being a free and open source project contributors and supporters are extremely welcome. |
|
|
|
If you like the project support it with a donation of your choice or become a backer/sponsor via |
|
|
|
<a class="info-panel-link gjs-four-color" target="_blank" href="https://opencollective.com/grapesjs">Open Collective</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div style="display: none"> |
|
|
|
<div class="gjs-logo-cont"> |
|
|
|
<a href="//grapesjs.com"><img class="gjs-logo" src="img/grapesjs-logo-cl.png"></a> |
|
|
|
<div class="gjs-logo-version"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="ad-cont"> |
|
|
|
<div id="code-sponsor-widget"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript"> |
|
|
|
CKEDITOR.dtd.$editable.a = 1; |
|
|
|
@ -223,7 +200,7 @@ |
|
|
|
var md = editor.Modal; |
|
|
|
|
|
|
|
// Add info command |
|
|
|
var infoContainer = document.getElementById("info-cont"); |
|
|
|
var infoContainer = document.getElementById("info-panel"); |
|
|
|
cmdm.add('open-info', { |
|
|
|
run(editor, sender) { |
|
|
|
sender.set('active', 0); |
|
|
|
@ -273,8 +250,22 @@ |
|
|
|
el.setAttribute('data-tooltip', title); |
|
|
|
el.setAttribute('title', ''); |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
// Do stuff on load |
|
|
|
editor.on('load', function() { |
|
|
|
var $ = grapesjs.$; |
|
|
|
|
|
|
|
// Show logo with the version |
|
|
|
var logoCont = document.querySelector('.gjs-logo-cont'); |
|
|
|
document.querySelector('.gjs-logo-version').innerHTML = 'v' + grapesjs.version; |
|
|
|
var logoPanel = document.querySelector('#gjs-pn-commands'); |
|
|
|
logoPanel.appendChild(logoCont); |
|
|
|
|
|
|
|
// Move Ad |
|
|
|
$('#gjs').append($('.ad-cont')); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
<script> |
|
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
|
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
|
|
|
@ -284,5 +275,6 @@ |
|
|
|
ga('create', 'UA-74284223-1', 'auto'); |
|
|
|
ga('send', 'pageview'); |
|
|
|
</script> |
|
|
|
<script type="text/javascript" src="https://app.codesponsor.io/scripts/OoCl1gjRd-YmpYfszYJ1Dg?theme=dark&width=100%25"></script> |
|
|
|
</body> |
|
|
|
</html> |
|
|
|
|
Artur Arseniev
9 years ago