tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Up newsletter demo

gh-pages
Artur Arseniev 4 years ago
parent
cf737a7a26
commit
415381570e
1 changed files with 68 additions and 143 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 211
      demo-newsletter-editor.html

211
demo-newsletter-editor.html
View File

@ -3,37 +3,22 @@
<head>
<meta charset="utf-8">
<title>GrapesJS Demo - Free Open Source Newsletter Editor</title>
<meta content="Best Free Open Source Responsive Newsletter Builder" name="description">
<meta content="Best Free Open Source Responsive No-Code Newsletter HTML Email Builder" name="description">
<link rel="stylesheet" href="stylesheets/grapes.min.css?v0.20.3">
<link rel="stylesheet" href="stylesheets/material.css">
<link rel="stylesheet" href="stylesheets/tooltip.css">
<link rel="stylesheet" href="stylesheets/toastr.min.css">
<link rel="stylesheet" href="stylesheets/grapesjs-preset-newsletter.css?v=0.2.21">
<link rel="stylesheet" href="stylesheets/demos.css?v2">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/aviary.js"></script>
<script src="js/grapes.min.js?v0.20.3"></script>
<script src="./js/ckeditor/ckeditor.js"></script>
<script src="./js/grapesjs-plugin-ckeditor.min.js"></script>
<script src="./js/grapesjs-preset-newsletter.min.js?v=0.2.21"></script>
<script src="./js/grapesjs-aviary.min.js"></script>
<script src="./js/toastr.min.js"></script>
<script src="./js/ajaxable.min.js"></script>
<script src="https://unpkg.com/grapesjs-plugin-ckeditor@0.0.10"></script>
<script src="https://unpkg.com/grapesjs-preset-newsletter@1.0.1"></script>
</head>
<style>
.nl-link {
color: inherit;
}
.gjs-clm-tag {
color: white;
}
.gjs-four-color {
color: #35d7bb;
}
.gjs-logo-version {
background-color: #5a606d;
}
@ -61,7 +46,7 @@
<table class="c1766">
<tr>
<td class="cell c1769">
<img class="c926" src="//artf.github.io/grapesjs/img/grapesjs-logo.png" alt="GrapesJS."/>
<img class="c926" src="https://grapesjs.com/img/grapesjs-logo.png" alt="GrapesJS."/>
</td>
<td class="cell c1776">
<div class="c1144">GrapesJS Newsletter Builder
@ -73,7 +58,7 @@
<table class="card">
<tr>
<td class="card-cell">
<img class="c1271" src="//artf.github.io/grapesjs/img/tmp-header-txt.jpg" alt="Big image here"/>
<img class="c1271" src="https://grapesjs.com/img/tmp-header-txt.jpg" alt="Big image here"/>
<table class="table100 c1357">
<tr>
<td class="card-content">
@ -85,7 +70,7 @@
<table class="c1542">
<tr>
<td class="card-footer" id="c1545">
<a class="button" href="https://github.com/artf/grapesjs">Free and Open Source
<a class="button" href="https://github.com/grapesjs/grapesjs">Free and Open Source
</a>
</td>
</tr>
@ -102,7 +87,7 @@
<table class="list-item-content">
<tr class="list-item-row">
<td class="list-cell-left">
<img class="list-item-image" src="//artf.github.io/grapesjs/img/tmp-blocks.jpg" alt="Image1"/>
<img class="list-item-image" src="https://grapesjs.com/img/tmp-blocks.jpg" alt="Image1"/>
</td>
<td class="list-cell-right">
<h1 class="card-title">Built-in Blocks
@ -121,7 +106,7 @@
<table class="list-item-content">
<tr class="list-item-row">
<td class="list-cell-left">
<img class="list-item-image" src="//artf.github.io/grapesjs/img/tmp-tgl-images.jpg" alt="Image2"/>
<img class="list-item-image" src="https://grapesjs.com/img/tmp-tgl-images.jpg" alt="Image2"/>
</td>
<td class="list-cell-right">
<h1 class="card-title">Toggle images
@ -140,7 +125,7 @@
<table class="grid-item-card">
<tr>
<td class="grid-item-card-cell">
<img class="grid-item-image" src="//artf.github.io/grapesjs/img/tmp-send-test.jpg" alt="Image1"/>
<img class="grid-item-image" src="https://grapesjs.com/img/tmp-send-test.jpg" alt="Image1"/>
<table class="grid-item-card-body">
<tr>
<td class="grid-item-card-content">
@ -159,7 +144,7 @@
<table class="grid-item-card">
<tr>
<td class="grid-item-card-cell">
<img class="grid-item-image" src="//artf.github.io/grapesjs/img/tmp-devices.jpg" alt="Image2"/>
<img class="grid-item-image" src="https://grapesjs.com/img/tmp-devices.jpg" alt="Image2"/>
<table class="grid-item-card-body">
<tr>
<td class="grid-item-card-content">
@ -182,7 +167,7 @@
<div class="c2577">
<p class="footer-info">GrapesJS Newsletter Builder is a free and open source preset (plugin) used on top of the GrapesJS core library.
For more information about and how to integrate it inside your applications check<p>
<a class="link" href="https://github.com/artf/grapesjs-preset-newsletter">GrapesJS Newsletter Preset</a>
<a class="link" href="https://github.com/grapesjs/preset-newsletter">GrapesJS Newsletter Preset</a>
<br/>
</div>
<div class="c2421">
@ -504,13 +489,13 @@
<br/>
<div class="info-panel-label">
<b>GrapesJS Newsletter Builder</b> is a showcase of what/how is possible to build an editor using the
<a class="info-panel-link gjs-four-color" target="_blank" href="//artf.github.io/grapesjs/">GrapesJS</a>
<a class="info-panel-link gjs-four-color" target="_blank" href="https://grapesjs.com/">GrapesJS</a>
core library
<br/><br/>
For any tip about this demo (or newsletters construction in general) check the
<a class="info-panel-link gjs-four-color" target="_blank" href="https://github.com/artf/grapesjs-preset-newsletter">Newsletter Preset repository</a>
<a class="info-panel-link gjs-four-color" target="_blank" href="https://github.com/grapesjs/preset-newsletter">Newsletter Preset repository</a>
and open an issue. For any problem with the builder itself, open an issue on the main
<a class="info-panel-link gjs-four-color" 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/grapesjs/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
@ -533,17 +518,11 @@
<script type="text/javascript">
var host = '//artf.github.io/grapesjs/';
var images = [
host + 'img/grapesjs-logo.png',
host + 'img/tmp-blocks.jpg',
host + 'img/tmp-tgl-images.jpg',
host + 'img/tmp-send-test.jpg',
host + 'img/tmp-devices.jpg',
];
var host = 'https://grapesjs.com/';
// Set up GrapesJS editor with the Newsletter plugin
var editor = grapesjs.init({
selectorManager: { componentFirst: true },
clearOnRender: true,
height: '100%',
storageManager: {
@ -552,19 +531,24 @@
}
},
assetManager: {
assets: images,
upload: 0,
assets: [
host + 'img/grapesjs-logo.png',
host + 'img/tmp-blocks.jpg',
host + 'img/tmp-tgl-images.jpg',
host + 'img/tmp-send-test.jpg',
host + 'img/tmp-devices.jpg',
],
upload: false,
uploadText: 'Uploading is not available in this demo',
},
container : '#gjs',
fromElement: true,
plugins: ['gjs-preset-newsletter', 'gjs-plugin-ckeditor'],
plugins: ['grapesjs-preset-newsletter', 'gjs-plugin-ckeditor'],
pluginsOpts: {
'gjs-preset-newsletter': {
'grapesjs-preset-newsletter': {
modalLabelImport: 'Paste all your code here below and click import',
modalLabelExport: 'Copy the code and use it wherever you want',
codeViewerTheme: 'material',
//defaultTemplate: templateImport,
importPlaceholder: '<table class="table"><tr><td class="cell">Hello world!</td></tr></table>',
cellStyle: {
'font-size': '12px',
@ -597,109 +581,36 @@
// Let's add in this demo the possibility to test our newsletters
var mdlClass = 'gjs-mdl-dialog-sm';
var pnm = editor.Panels;
var cmdm = editor.Commands;
var md = editor.Modal;
/*
var testContainer = document.getElementById("test-form");
var contentEl = testContainer.querySelector('input[name=body]');
cmdm.add('send-test', {
run(editor, sender) {
sender.set('active', 0);
var modalContent = md.getContentEl();
var mdlDialog = document.querySelector('.gjs-mdl-dialog');
var cmdGetCode = cmdm.get('gjs-get-inlined-html');
contentEl.value = cmdGetCode && cmdGetCode.run(editor);
mdlDialog.className += ' ' + mdlClass;
testContainer.style.display = 'block';
md.setTitle('Test your Newsletter');
md.setContent('');
md.setContent(testContainer);
md.open();
md.getModel().once('change:open', function() {
mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
//clean status
})
}
});
pnm.addButton('options', {
id: 'send-test',
className: 'fa fa-paper-plane',
command: 'send-test',
attributes: {
'title': 'Test Newsletter',
'data-tooltip-pos': 'bottom',
},
});
var statusFormElC = document.querySelector('.form-status');
var statusFormEl = document.querySelector('.form-status i');
var ajaxTest = ajaxable(testContainer).
onStart(function(){
statusFormEl.className = 'fa fa-refresh anim-spin';
statusFormElC.style.opacity = '1';
statusFormElC.className = 'form-status';
})
.onResponse(function(res){
if (res.data) {
statusFormElC.style.opacity = '0';
statusFormEl.removeAttribute('data-tooltip');
md.close();
} else if(res.errors || res.errors == '') {
var err = res.errors || 'Server error';
statusFormEl.className = 'fa fa-exclamation-circle';
statusFormEl.setAttribute('data-tooltip', err);
statusFormElC.className = 'form-status text-danger';
}
});
*/
// Add info command
var infoContainer = document.getElementById("info-panel");
cmdm.add('open-info', {
run: function(editor, sender) {
var mdlClass = 'gjs-mdl-dialog-sm';
sender.set('active', 0);
var mdlDialog = document.querySelector('.gjs-mdl-dialog');
mdlDialog.className += ' ' + mdlClass;
infoContainer.style.display = 'block';
md.setTitle('About this demo');
md.setContent('');
md.setContent(infoContainer);
md.open();
md.open({
title: 'About this demo',
content: infoContainer,
});
md.getModel().once('change:open', function() {
mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
})
}
});
// Add info button
const iconStyle = 'style="display: block; max-width: 22px"';
pnm.addButton('options', [{
id: 'undo',
className: 'fa fa-undo',
attributes: {title: 'Undo'},
command: function(){ editor.runCommand('core:undo') }
},{
id: 'redo',
className: 'fa fa-repeat',
attributes: {title: 'Redo'},
command: function(){ editor.runCommand('core:redo') }
},{
id: 'clear-all',
className: 'fa fa-trash icon-blank',
attributes: {title: 'Clear canvas'},
command: {
run: function(editor, sender) {
sender && sender.set('active', false);
if(confirm('Are you sure to clean the canvas?')){
editor.DomComponents.clear();
setTimeout(function(){
localStorage.clear()
},0)
}
}
}
},{
id: 'view-info',
className: 'fa fa-question-circle',
label: `<svg ${iconStyle} viewBox="0 0 24 24">
<path fill="currentColor" d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg>`,
command: 'open-info',
attributes: {
'title': 'About',
@ -707,20 +618,29 @@
},
}]);
// Simple warn notifier
var origWarn = console.warn;
toastr.options = {
closeButton: true,
preventDuplicates: true,
showDuration: 250,
hideDuration: 150
};
console.warn = function (msg) {
toastr.warning(msg);
origWarn(msg);
};
// Beautify tooltips
[
['sw-visibility', 'Show Borders'],
['preview', 'Preview'],
['fullscreen', 'Fullscreen'],
['export-template', 'Export'],
['undo', 'Undo'],
['redo', 'Redo'],
['gjs-open-import-template', 'Import'],
['gjs-toggle-images', 'Toggle images'],
['canvas-clear', 'Clear canvas']
].forEach(function(item) {
pnm.getButton('options', item[0]).set('attributes', {title: item[1], 'data-tooltip-pos': 'bottom'});
});
// [
// ['open-sm', 'Style Manager'],
// ['open-layers', 'Layers'],
// ['open-blocks', 'Blocks']
// ].forEach(function(item) {
// pnm.getButton('views', item[0]).set('attributes', { title: item[1], 'data-tooltip-pos': 'bottom', title2: item[1] });
// console.log('views', item[0], pnm.getButton('views', item[0]).get('attributes'))
// });
var titles = document.querySelectorAll('*[title]');
for (var i = 0; i < titles.length; i++) {
var el = titles[i];
@ -732,19 +652,24 @@
el.setAttribute('title', '');
}
// Update canvas-clear command
cmdm.add('canvas-clear', function() {
if(confirm('Are you sure to clean the canvas?')) {
editor.runCommand('core:canvas-clear')
setTimeout(function(){ localStorage.clear()}, 0)
}
});
// Do stuff on load
editor.on('load', function() {
var $ = grapesjs.$;
// Show borders by default
pnm.getButton('options', 'sw-visibility').set('active', 1);
// 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>

Write Preview
Loading…
Cancel
Save