initial commit

This commit is contained in:
equippedcoding-master
2025-09-17 09:37:06 -05:00
parent 86108ca47e
commit e2c98790b2
55389 changed files with 6206730 additions and 0 deletions

View File

@@ -0,0 +1,12 @@
.DS_Store
.settings/
.sass-cache/
.project
grapes.sublime-project
grapes.sublime-workspace
private/
vendor/
node_modules/
bower_components/
tests/

View File

@@ -0,0 +1 @@
grapesjs.com

View File

@@ -0,0 +1,292 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<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?v0.20.3">
<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?v2">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/grapes.min.js?v0.20.3"></script>
<script src="./js/toastr.min.js"></script>
<script src="./js/ajaxable.min.js"></script>
<script src="js/aviary.js"></script>
<script src="./js/ckeditor/ckeditor.js"></script>
<!-- Plugins -->
<script src="./js/grapesjs-plugin-ckeditor.min.js"></script>
<script src="https://unpkg.com/grapesjs-mjml@1.0.2"></script>
<script src="https://unpkg.com/grapesjs-navbar"></script>
<script src="https://unpkg.com/grapesjs-plugin-forms@2.0.5"></script>
</head>
<style>
.gjs-clm-tags {
display: none;
}
.gjs-four-color {
color: #f45e43;
}
.gjs-logo-version {
background-color: #4b4e54;
}
</style>
<body>
<div id="gjs" style="height:0px; overflow:hidden">
<mjml><mj-body>
<mj-section background-color="#f0f0f0">
<mj-column>
<mj-text font-style="italic" font-size="20px" color="#626262">
My Company
</mj-text>
</mj-column>
</mj-section>
<mj-section background-url="//1.bp.blogspot.com/-TPrfhxbYpDY/Uh3Refzk02I/AAAAAAAALw8/5sUJ0UUGYuw/s1600/New+York+in+The+1960's+-+70's+(2).jpg" background-size="cover" background-repeat="no-repeat">
<mj-column>
<mj-text align="center" color="#fff" font-size="40px" font-family="Helvetica Neue">Slogan here</mj-text>
<mj-button background-color="#F63A4D" href="#">
Promotion
</mj-button>
</mj-column>
</mj-section>
<mj-section background-color="#fafafa">
<mj-column width="400px">
<mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262">My Awesome Text</mj-text>
<mj-text color="#525252">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget
nulla elit. Nulla aliquet mollis faucibus.
</mj-text>
<mj-button background-color="#F45E43" href="#">Learn more</mj-button>
</mj-column>
</mj-section>
<mj-section background-color="white">
<mj-column>
<mj-image width="200px" src="https://designspell.files.wordpress.com/2012/01/sciolino-paris-bw.jpg" />
</mj-column>
<mj-column>
<mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262">
Find amazing places
</mj-text>
<mj-text color="#525252">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#fbfbfb">
<mj-column>
<mj-image width="100px" src="//191n.mj.am/img/191n/3s/x0l.png" />
</mj-column>
<mj-column>
<mj-image width="100px" src="//191n.mj.am/img/191n/3s/x01.png" />
</mj-column>
<mj-column>
<mj-image width="100px" src="//191n.mj.am/img/191n/3s/x0s.png" />
</mj-column>
</mj-section>
<mj-section background-color="#e7e7e7">
<mj-column>
<mj-button href="#">Hello There!</mj-button>
<mj-social font-size="15px" icon-size="30px" mode="horizontal">
<mj-social-element name="facebook" href="https://mjml.io/">
Facebook
</mj-social-element>
<mj-social-element name="google" href="https://mjml.io/">
Google
</mj-social-element>
<mj-social-element name="twitter" href="https://mjml.io/">
Twitter
</mj-social-element>
</mj-social>
</mj-column>
</mj-section>
</mj-body></mjml>
</div>
<div id="info-panel" style="display:none">
<br/>
<svg class="info-panel-logo" xmlns="//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="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-panel-link gjs-four-color" target="_blank" href="//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-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-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>
<script type="text/javascript">
CKEDITOR.dtd.$editable.a = 1;
var lp = './img/';
var plp = 'https://via.placeholder.com/350x250/';
var images = [
plp+'78c5d6/fff/image1.jpg', plp+'459ba8/fff/image2.jpg', plp+'79c267/fff/image3.jpg',
plp+'c5d647/fff/image4.jpg', plp+'f28c33/fff/image5.jpg', plp+'e868a2/fff/image6.jpg', plp+'cc4360/fff/image7.jpg',
lp+'work-desk.jpg', lp+'phone-app.png', lp+'bg-gr-v.png'
];
// Set up GrapesJS editor with the MJML plugin
var editor = grapesjs.init({
clearOnRender: true,
height: '100%',
avoidInlineStyle: false,
storageManager: {
options: {
local: { key: 'gjsProjectMjml' }
}
},
//storageManager:{ autoload: 0 },
assetManager: {
assets: images,
upload: 0,
uploadText: 'Uploading is not available in this demo',
},
container : '#gjs',
fromElement: true,
plugins: [
'gjs-blocks-basic',
'grapesjs-mjml',
'gjs-plugin-ckeditor',
'grapesjs-plugin-forms',
'grapesjs-navbar'
],
pluginsOpts: {
'gjs-plugin-ckeditor': {
position: 'center',
options: {
startupFocus: true,
extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
allowedContent: true, // Disable auto-formatting, class removing, etc.
enterMode: CKEDITOR.ENTER_BR,
extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
toolbar: [
{ name: 'styles', items: ['Font', 'FontSize' ] },
['Bold', 'Italic', 'Underline', 'Strike'],
{name: 'paragraph', items : [ 'NumberedList', 'BulletedList']},
{name: 'links', items: ['Link', 'Unlink']},
{name: 'colors', items: [ 'TextColor', 'BGColor' ]},
],
}
}
},
});
var mdlClass = 'gjs-mdl-dialog-sm';
var pnm = editor.Panels;
var cmdm = editor.Commands;
var md = editor.Modal;
// Add info command
var infoContainer = document.getElementById("info-panel");
cmdm.add('open-info', {
run(editor, sender) {
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.getModel().once('change:open', function() {
mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
})
}
});
pnm.addButton('options', {
id: 'view-info',
className: 'fa fa-question-circle',
command: 'open-info',
attributes: {
'title': 'About',
'data-tooltip-pos': 'bottom',
},
});
// 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
var titles = document.querySelectorAll('*[title]');
for (var i = 0; i < titles.length; i++) {
var el = titles[i];
var title = el.getAttribute('title');
title = title ? title.trim(): '';
if(!title)
break;
el.setAttribute('data-tooltip', title);
el.setAttribute('data-tooltip-pos', 'bottom');
el.setAttribute('title', '');
}
// Do stuff on load
editor.onReady(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),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-74284223-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>

View File

@@ -0,0 +1,760 @@
<!doctype html>
<html lang="en">
<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">
<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>
</head>
<style>
.nl-link {
color: inherit;
}
.gjs-clm-tag {
color: white;
}
.gjs-four-color {
color: #35d7bb;
}
.gjs-logo-version {
background-color: #5a606d;
}
</style>
<body>
<div id="gjs" style="height:0px; overflow:hidden">
<table class="main-body">
<tr class="row">
<td class="main-body-cell">
<table class="container">
<tr>
<td class="container-cell">
<table class="table100 c1790">
<tr>
<td class="top-cell" id="c1793">
<u class="browser-link" id="c307">View in browser
</u>
</td>
</tr>
</table>
<table class="c1766">
<tr>
<td class="cell c1769">
<img class="c926" src="//artf.github.io/grapesjs/img/grapesjs-logo.png" alt="GrapesJS."/>
</td>
<td class="cell c1776">
<div class="c1144">GrapesJS Newsletter Builder
<br/>
</div>
</td>
</tr>
</table>
<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"/>
<table class="table100 c1357">
<tr>
<td class="card-content">
<h1 class="card-title">Build your newsletters faster than ever
<br/>
</h1>
<p class="card-text">Import, build, test and export responsive newsletter templates faster than ever using the GrapesJS Newsletter Builder.
</p>
<table class="c1542">
<tr>
<td class="card-footer" id="c1545">
<a class="button" href="https://github.com/artf/grapesjs">Free and Open Source
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="list-item">
<tr>
<td class="list-item-cell">
<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"/>
</td>
<td class="list-cell-right">
<h1 class="card-title">Built-in Blocks
</h1>
<p class="card-text">Drag and drop built-in blocks from the right panel and style them in a matter of seconds
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="list-item">
<tr>
<td class="list-item-cell">
<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"/>
</td>
<td class="list-cell-right">
<h1 class="card-title">Toggle images
</h1>
<p class="card-text">Build a good looking newsletter even without images enabled by the email clients
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="grid-item-row">
<tr>
<td class="grid-item-cell2-l">
<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"/>
<table class="grid-item-card-body">
<tr>
<td class="grid-item-card-content">
<h1 class="card-title">Test it
</h1>
<p class="card-text">You can send email tests directly from the editor and check how are looking on your email clients
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="grid-item-cell2-r">
<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"/>
<table class="grid-item-card-body">
<tr>
<td class="grid-item-card-content">
<h1 class="card-title">Responsive
</h1>
<p class="card-text">Using the device manager you'll always send a fully responsive contents
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="footer">
<tr>
<td class="footer-cell">
<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>
<br/>
</div>
<div class="c2421">
MADE BY <a class="link" href="https://github.com/artf">ARTUR ARSENIEV</a>
<p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<style>
.link {
color: rgb(217, 131, 166);
}
.row{
vertical-align:top;
}
.main-body{
min-height:150px;
padding: 5px;
width:100%;
height:100%;
background-color:rgb(234, 236, 237);
}
.c926{
color:rgb(158, 83, 129);
width:100%;
font-size:50px;
}
.cell.c849{
width:11%;
}
.c1144{
padding: 10px;
font-size:17px;
font-weight: 300;
}
.card{
min-height:150px;
padding: 5px;
margin-bottom:20px;
height:0px;
}
.card-cell{
background-color:rgb(255, 255, 255);
overflow:hidden;
border-radius: 3px;
padding: 0;
text-align:center;
}
.card.sector{
background-color:rgb(255, 255, 255);
border-radius: 3px;
border-collapse:separate;
}
.c1271{
width:100%;
margin: 0 0 15px 0;
font-size:50px;
color:rgb(120, 197, 214);
line-height:250px;
text-align:center;
}
.table100{
width:100%;
}
.c1357{
min-height:150px;
padding: 5px;
margin: auto;
height:0px;
}
.darkerfont{
color:rgb(65, 69, 72);
}
.button{
font-size:12px;
padding: 10px 20px;
background-color:rgb(217, 131, 166);
color:rgb(255, 255, 255);
text-align:center;
border-radius: 3px;
font-weight:300;
}
.table100.c1437{
text-align:left;
}
.cell.cell-bottom{
text-align:center;
height:51px;
}
.card-title{
font-size:25px;
font-weight:300;
color:rgb(68, 68, 68);
}
.card-content{
font-size:13px;
line-height:20px;
color:rgb(111, 119, 125);
padding: 10px 20px 0 20px;
vertical-align:top;
}
.container{
font-family: Helvetica, serif;
min-height:150px;
padding: 5px;
margin:auto;
height:0px;
width:90%;
max-width:550px;
}
.cell.c856{
vertical-align:middle;
}
.container-cell{
vertical-align:top;
font-size:medium;
padding-bottom:50px;
}
.c1790{
min-height:150px;
padding: 5px;
margin:auto;
height:0px;
}
.table100.c1790{
min-height:30px;
border-collapse:separate;
margin: 0 0 10px 0;
}
.browser-link{
font-size:12px;
}
.top-cell{
text-align:right;
color:rgb(152, 156, 165);
}
.table100.c1357{
margin: 0;
border-collapse:collapse;
}
.c1769{
width:30%;
}
.c1776{
width:70%;
}
.c1766{
margin: 0 auto 10px 0;
padding: 5px;
width:100%;
min-height:30px;
}
.cell.c1769{
width:11%;
}
.cell.c1776{
vertical-align:middle;
}
.c1542{
margin: 0 auto 10px auto;
padding:5px;
width:100%;
}
.card-footer{
padding: 20px 0;
text-align:center;
}
.c2280{
height:150px;
margin:0 auto 10px auto;
padding:5px 5px 5px 5px;
width:100%;
}
.c2421{
padding:10px;
}
.c2577{
padding:10px;
}
.footer{
margin-top: 50px;
color:rgb(152, 156, 165);
text-align:center;
font-size:11px;
padding: 5px;
}
.quote {
font-style: italic;
}
.list-item{
height:auto;
width:100%;
margin: 0 auto 10px auto;
padding: 5px;
}
.list-item-cell{
background-color:rgb(255, 255, 255);
border-radius: 3px;
overflow: hidden;
padding: 0;
}
.list-cell-left{
width:30%;
padding: 0;
}
.list-cell-right{
width:70%;
color:rgb(111, 119, 125);
font-size:13px;
line-height:20px;
padding: 10px 20px 0px 20px;
}
.list-item-content{
border-collapse: collapse;
margin: 0 auto;
padding: 5px;
height:150px;
width:100%;
}
.list-item-image{
color:rgb(217, 131, 166);
font-size:45px;
width: 100%;
}
.grid-item-image{
line-height:150px;
font-size:50px;
color:rgb(120, 197, 214);
margin-bottom:15px;
width:100%;
}
.grid-item-row {
margin: 0 auto 10px;
padding: 5px 0;
width: 100%;
}
.grid-item-card {
width:100%;
padding: 5px 0;
margin-bottom: 10px;
}
.grid-item-card-cell{
background-color:rgb(255, 255, 255);
overflow: hidden;
border-radius: 3px;
text-align:center;
padding: 0;
}
.grid-item-card-content{
font-size:13px;
color:rgb(111, 119, 125);
padding: 0 10px 20px 10px;
width:100%;
line-height:20px;
}
.grid-item-cell2-l{
vertical-align:top;
padding-right:10px;
width:50%;
}
.grid-item-cell2-r{
vertical-align:top;
padding-left:10px;
width:50%;
}
</style>
</div>
<form id="test-form" class="test-form" action="//grapes.16mb.com/s" method="POST" style="display:none">
<div class="putsmail-c">
<a href="https://putsmail.com/" target="_blank">
<img src="./img/putsmail.png" style="opacity:0.85;" />
</a>
<div class="gjs-sm-property" style="font-size: 10px">
Test delivering offered by <a class="nl-link" href="https://litmus.com/" target="_blank">Litmus</a> with <a class="nl-link" href="https://putsmail.com/" target="_blank">Putsmail</a>
<span class="form-status" style="opacity: 0">
<i class="fa fa-refresh anim-spin" aria-hidden="true"></i>
</span>
</div>
</div>
<div class="gjs-sm-property">
<div class="gjs-field">
<span id="gjs-sm-input-holder">
<input type="email" name="email" placeholder="Email" required>
</span>
</div>
</div>
<div class="gjs-sm-property">
<div class="gjs-field">
<span id="gjs-sm-input-holder">
<input type="text" name="subject" placeholder="Subject" required>
</span>
</div>
</div>
<input type="hidden" name="body">
<button class="gjs-btn-prim gjs-btn-import" style="width: 100%">SEND</button>
</form>
<div id="info-panel" style="display:none">
<br/>
<svg class="info-panel-logo" xmlns="//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="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>
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>
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>
<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="native-carbon"></div>
<script async type="text/javascript" src="./js/carbon-v2.js"></script>
</div>
<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',
];
// Set up GrapesJS editor with the Newsletter plugin
var editor = grapesjs.init({
clearOnRender: true,
height: '100%',
storageManager: {
options: {
local: { key: 'gjsProjectNl' }
}
},
assetManager: {
assets: images,
upload: 0,
uploadText: 'Uploading is not available in this demo',
},
container : '#gjs',
fromElement: true,
plugins: ['gjs-preset-newsletter', 'gjs-plugin-ckeditor'],
pluginsOpts: {
'gjs-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',
'font-weight': 300,
'vertical-align': 'top',
color: 'rgb(111, 119, 125)',
margin: 0,
padding: 0,
}
},
'gjs-plugin-ckeditor': {
position: 'center',
options: {
startupFocus: true,
extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
allowedContent: true, // Disable auto-formatting, class removing, etc.
enterMode: CKEDITOR.ENTER_BR,
extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
toolbar: [
{ name: 'styles', items: ['Font', 'FontSize' ] },
['Bold', 'Italic', 'Underline', 'Strike'],
{name: 'paragraph', items : [ 'NumberedList', 'BulletedList']},
{name: 'links', items: ['Link', 'Unlink']},
{name: 'colors', items: [ 'TextColor', 'BGColor' ]},
],
}
}
}
});
// 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) {
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.getModel().once('change:open', function() {
mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
})
}
});
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',
command: 'open-info',
attributes: {
'title': 'About',
'data-tooltip-pos': 'bottom',
},
}]);
// 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
var titles = document.querySelectorAll('*[title]');
for (var i = 0; i < titles.length; i++) {
var el = titles[i];
var title = el.getAttribute('title');
title = title ? title.trim(): '';
if(!title)
break;
el.setAttribute('data-tooltip', title);
el.setAttribute('title', '');
}
// 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),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-74284223-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>GrapesJS</title>
<meta name="generator" content="VuePress 1.9.7">
<link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapes.min.css?v0.20.3">
<script src="https://grapesjs.com/js/grapes.min.js?v0.20.3"></script>
<meta name="description" content="GrapesJS documentation">
<link rel="preload" href="/docs/assets/css/0.styles.2ba4c746.css" as="style"><link rel="preload" href="/docs/assets/js/app.5b6f2c9b.js" as="script"><link rel="preload" href="/docs/assets/js/18.59b405cc.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.e937fc81.js"><link rel="prefetch" href="/docs/assets/js/11.905ee507.js"><link rel="prefetch" href="/docs/assets/js/12.7e617b34.js"><link rel="prefetch" href="/docs/assets/js/13.ea89d421.js"><link rel="prefetch" href="/docs/assets/js/14.7efecc86.js"><link rel="prefetch" href="/docs/assets/js/15.f12cf30a.js"><link rel="prefetch" href="/docs/assets/js/16.6adefb82.js"><link rel="prefetch" href="/docs/assets/js/17.44edea6e.js"><link rel="prefetch" href="/docs/assets/js/19.1926f968.js"><link rel="prefetch" href="/docs/assets/js/2.789685b7.js"><link rel="prefetch" href="/docs/assets/js/20.ad549be1.js"><link rel="prefetch" href="/docs/assets/js/21.e9cd2f68.js"><link rel="prefetch" href="/docs/assets/js/22.81eea678.js"><link rel="prefetch" href="/docs/assets/js/23.52f9d6aa.js"><link rel="prefetch" href="/docs/assets/js/24.185c95ee.js"><link rel="prefetch" href="/docs/assets/js/25.8a69cea6.js"><link rel="prefetch" href="/docs/assets/js/26.bd06e876.js"><link rel="prefetch" href="/docs/assets/js/27.72fe3ead.js"><link rel="prefetch" href="/docs/assets/js/28.475048af.js"><link rel="prefetch" href="/docs/assets/js/29.7215298c.js"><link rel="prefetch" href="/docs/assets/js/3.6d46cbb4.js"><link rel="prefetch" href="/docs/assets/js/30.95752207.js"><link rel="prefetch" href="/docs/assets/js/31.c660a692.js"><link rel="prefetch" href="/docs/assets/js/32.c2af8865.js"><link rel="prefetch" href="/docs/assets/js/33.d2a4e161.js"><link rel="prefetch" href="/docs/assets/js/34.dcacd773.js"><link rel="prefetch" href="/docs/assets/js/35.4040251c.js"><link rel="prefetch" href="/docs/assets/js/36.9efdf773.js"><link rel="prefetch" href="/docs/assets/js/37.e6f97e52.js"><link rel="prefetch" href="/docs/assets/js/38.55fea043.js"><link rel="prefetch" href="/docs/assets/js/39.98a3d430.js"><link rel="prefetch" href="/docs/assets/js/4.a96caa0e.js"><link rel="prefetch" href="/docs/assets/js/40.8b5f7e9f.js"><link rel="prefetch" href="/docs/assets/js/41.0ad53489.js"><link rel="prefetch" href="/docs/assets/js/42.bb1c90a5.js"><link rel="prefetch" href="/docs/assets/js/43.98719541.js"><link rel="prefetch" href="/docs/assets/js/44.507734ee.js"><link rel="prefetch" href="/docs/assets/js/45.6f8bda64.js"><link rel="prefetch" href="/docs/assets/js/46.08e98819.js"><link rel="prefetch" href="/docs/assets/js/47.42662b32.js"><link rel="prefetch" href="/docs/assets/js/48.30aca94c.js"><link rel="prefetch" href="/docs/assets/js/49.750254cd.js"><link rel="prefetch" href="/docs/assets/js/5.09e23246.js"><link rel="prefetch" href="/docs/assets/js/50.8086eed3.js"><link rel="prefetch" href="/docs/assets/js/51.47e7fe09.js"><link rel="prefetch" href="/docs/assets/js/52.b5dc306a.js"><link rel="prefetch" href="/docs/assets/js/53.cd7d012a.js"><link rel="prefetch" href="/docs/assets/js/54.9ea23b03.js"><link rel="prefetch" href="/docs/assets/js/55.f226cde3.js"><link rel="prefetch" href="/docs/assets/js/56.4e8f20e3.js"><link rel="prefetch" href="/docs/assets/js/57.08a59732.js"><link rel="prefetch" href="/docs/assets/js/58.fa06175c.js"><link rel="prefetch" href="/docs/assets/js/59.8c744cd8.js"><link rel="prefetch" href="/docs/assets/js/6.65ea4bd5.js"><link rel="prefetch" href="/docs/assets/js/60.01e55299.js"><link rel="prefetch" href="/docs/assets/js/61.58eb5e14.js"><link rel="prefetch" href="/docs/assets/js/62.304b078e.js"><link rel="prefetch" href="/docs/assets/js/63.669f8b7a.js"><link rel="prefetch" href="/docs/assets/js/64.e25375fa.js"><link rel="prefetch" href="/docs/assets/js/65.fc463b4a.js"><link rel="prefetch" href="/docs/assets/js/66.aafbde31.js"><link rel="prefetch" href="/docs/assets/js/67.485710d0.js"><link rel="prefetch" href="/docs/assets/js/68.15ec22f6.js"><link rel="prefetch" href="/docs/assets/js/69.bb23acc1.js"><link rel="prefetch" href="/docs/assets/js/7.e7259d86.js"><link rel="prefetch" href="/docs/assets/js/70.798be509.js"><link rel="prefetch" href="/docs/assets/js/71.bb61fff6.js"><link rel="prefetch" href="/docs/assets/js/72.b923efcc.js"><link rel="prefetch" href="/docs/assets/js/73.47c188d5.js"><link rel="prefetch" href="/docs/assets/js/74.064778f4.js"><link rel="prefetch" href="/docs/assets/js/8.95ed0d67.js"><link rel="prefetch" href="/docs/assets/js/9.77e32d8c.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.2ba4c746.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>How did we get here?</blockquote> <a href="/docs/" class="router-link-active">
Take me home.
</a></div></div><div class="global-ui"></div></div>
<script src="/docs/assets/js/app.5b6f2c9b.js" defer></script><script src="/docs/assets/js/18.59b405cc.js" defer></script>
</body>
</html>

View File

@@ -0,0 +1,342 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Getting started | GrapesJS</title>
<meta name="generator" content="VuePress 1.9.7">
<link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapes.min.css?v0.20.3">
<script src="https://grapesjs.com/js/grapes.min.js?v0.20.3"></script>
<meta name="description" content="GrapesJS documentation">
<link rel="preload" href="/docs/assets/css/0.styles.2ba4c746.css" as="style"><link rel="preload" href="/docs/assets/js/app.5b6f2c9b.js" as="script"><link rel="preload" href="/docs/assets/js/11.905ee507.js" as="script"><link rel="preload" href="/docs/assets/js/2.789685b7.js" as="script"><link rel="preload" href="/docs/assets/js/19.1926f968.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.e937fc81.js"><link rel="prefetch" href="/docs/assets/js/12.7e617b34.js"><link rel="prefetch" href="/docs/assets/js/13.ea89d421.js"><link rel="prefetch" href="/docs/assets/js/14.7efecc86.js"><link rel="prefetch" href="/docs/assets/js/15.f12cf30a.js"><link rel="prefetch" href="/docs/assets/js/16.6adefb82.js"><link rel="prefetch" href="/docs/assets/js/17.44edea6e.js"><link rel="prefetch" href="/docs/assets/js/18.59b405cc.js"><link rel="prefetch" href="/docs/assets/js/20.ad549be1.js"><link rel="prefetch" href="/docs/assets/js/21.e9cd2f68.js"><link rel="prefetch" href="/docs/assets/js/22.81eea678.js"><link rel="prefetch" href="/docs/assets/js/23.52f9d6aa.js"><link rel="prefetch" href="/docs/assets/js/24.185c95ee.js"><link rel="prefetch" href="/docs/assets/js/25.8a69cea6.js"><link rel="prefetch" href="/docs/assets/js/26.bd06e876.js"><link rel="prefetch" href="/docs/assets/js/27.72fe3ead.js"><link rel="prefetch" href="/docs/assets/js/28.475048af.js"><link rel="prefetch" href="/docs/assets/js/29.7215298c.js"><link rel="prefetch" href="/docs/assets/js/3.6d46cbb4.js"><link rel="prefetch" href="/docs/assets/js/30.95752207.js"><link rel="prefetch" href="/docs/assets/js/31.c660a692.js"><link rel="prefetch" href="/docs/assets/js/32.c2af8865.js"><link rel="prefetch" href="/docs/assets/js/33.d2a4e161.js"><link rel="prefetch" href="/docs/assets/js/34.dcacd773.js"><link rel="prefetch" href="/docs/assets/js/35.4040251c.js"><link rel="prefetch" href="/docs/assets/js/36.9efdf773.js"><link rel="prefetch" href="/docs/assets/js/37.e6f97e52.js"><link rel="prefetch" href="/docs/assets/js/38.55fea043.js"><link rel="prefetch" href="/docs/assets/js/39.98a3d430.js"><link rel="prefetch" href="/docs/assets/js/4.a96caa0e.js"><link rel="prefetch" href="/docs/assets/js/40.8b5f7e9f.js"><link rel="prefetch" href="/docs/assets/js/41.0ad53489.js"><link rel="prefetch" href="/docs/assets/js/42.bb1c90a5.js"><link rel="prefetch" href="/docs/assets/js/43.98719541.js"><link rel="prefetch" href="/docs/assets/js/44.507734ee.js"><link rel="prefetch" href="/docs/assets/js/45.6f8bda64.js"><link rel="prefetch" href="/docs/assets/js/46.08e98819.js"><link rel="prefetch" href="/docs/assets/js/47.42662b32.js"><link rel="prefetch" href="/docs/assets/js/48.30aca94c.js"><link rel="prefetch" href="/docs/assets/js/49.750254cd.js"><link rel="prefetch" href="/docs/assets/js/5.09e23246.js"><link rel="prefetch" href="/docs/assets/js/50.8086eed3.js"><link rel="prefetch" href="/docs/assets/js/51.47e7fe09.js"><link rel="prefetch" href="/docs/assets/js/52.b5dc306a.js"><link rel="prefetch" href="/docs/assets/js/53.cd7d012a.js"><link rel="prefetch" href="/docs/assets/js/54.9ea23b03.js"><link rel="prefetch" href="/docs/assets/js/55.f226cde3.js"><link rel="prefetch" href="/docs/assets/js/56.4e8f20e3.js"><link rel="prefetch" href="/docs/assets/js/57.08a59732.js"><link rel="prefetch" href="/docs/assets/js/58.fa06175c.js"><link rel="prefetch" href="/docs/assets/js/59.8c744cd8.js"><link rel="prefetch" href="/docs/assets/js/6.65ea4bd5.js"><link rel="prefetch" href="/docs/assets/js/60.01e55299.js"><link rel="prefetch" href="/docs/assets/js/61.58eb5e14.js"><link rel="prefetch" href="/docs/assets/js/62.304b078e.js"><link rel="prefetch" href="/docs/assets/js/63.669f8b7a.js"><link rel="prefetch" href="/docs/assets/js/64.e25375fa.js"><link rel="prefetch" href="/docs/assets/js/65.fc463b4a.js"><link rel="prefetch" href="/docs/assets/js/66.aafbde31.js"><link rel="prefetch" href="/docs/assets/js/67.485710d0.js"><link rel="prefetch" href="/docs/assets/js/68.15ec22f6.js"><link rel="prefetch" href="/docs/assets/js/69.bb23acc1.js"><link rel="prefetch" href="/docs/assets/js/7.e7259d86.js"><link rel="prefetch" href="/docs/assets/js/70.798be509.js"><link rel="prefetch" href="/docs/assets/js/71.bb61fff6.js"><link rel="prefetch" href="/docs/assets/js/72.b923efcc.js"><link rel="prefetch" href="/docs/assets/js/73.47c188d5.js"><link rel="prefetch" href="/docs/assets/js/74.064778f4.js"><link rel="prefetch" href="/docs/assets/js/8.95ed0d67.js"><link rel="prefetch" href="/docs/assets/js/9.77e32d8c.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.2ba4c746.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" alt="GrapesJS" class="logo"> <span class="site-name can-hide">GrapesJS</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/" class="nav-link">
Docs
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link">
API Reference
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Support Us
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Twitter
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/" class="nav-link">
Docs
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link">
API Reference
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Support Us
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Twitter
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div id="native-carbon" class="carbon-ads"></div> <ul class="sidebar-links"><li><a href="/docs/" aria-current="page" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Modules</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/modules/Components.html" class="sidebar-link">Components</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components &amp; JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Traits</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/modules/I18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/modules/Selectors.html" class="sidebar-link">Selectors</a></li><li><a href="/docs/modules/Layers.html" class="sidebar-link">Layers</a></li><li><a href="/docs/modules/Style-manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/modules/Storage.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/modules/Modal.html" class="sidebar-link">Modal</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Guides</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="getting-started"><a href="#getting-started" class="header-anchor">#</a> Getting started</h1> <p>This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.</p> <p>The pretty minimalistic way to instantiate the editor could be like this:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>path/to/grapes.min.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>path/to/grapes.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gjs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">var</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">container</span> <span class="token operator">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span>
<span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token string">'&lt;div class=&quot;txt-red&quot;&gt;Hello world!&lt;/div&gt;'</span><span class="token punctuation">,</span>
<span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token string">'.txt-red{color: red}'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>In just few lines, with the default configurations, you're already able to see something with which play around.</p> <p>[[img/default-gjs.jpg]]</p> <p>You'll see components commands on top left position that come handy to create and manage your blocks, below there are options which need to highlight and export them. When you select components ('mouse pointer' icon), on the right side, you should see pop up Class Manager and Style Manager options which allow to customize the style of the components. There is also a Layer Manager/Navigator ('hamburger' icon) which helps to manage easily the structure.</p> <p>Of course all those stuff (panels, buttons, commands, etc.) are set just as default so you can overwrite them and add more other. Before you start to create things you should know that GrapesJS UI is composed basically by a canvas (where you will 'draw') and panels (which will contain buttons)</p> <p>[[img/canvas-panels.jpg]]</p> <p>If you'd like to extend the already instantiated editor you have to check <a href="API-Reference">API Reference</a>. Check also <a href="./Creating-plugins">how to create plugins</a> using the same API.
In this guide we'll focus on how to initialize the editor with all custom UI from scratch.</p> <p>Let's start the editor with some basic toolbar panel</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span>
<span class="token keyword">var</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">container</span> <span class="token operator">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span>
<span class="token literal-property property">panels</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'commands'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">...</span>
</code></pre></div><p>In this example we set a panel with 'commands' as an id and after the render we'll see nothing more than an empty div added to our panels. The new panel is already styled as the id 'commands' is one of the default but you can use whatever you like and place it wherever you want with CSS. With refresh we might see something like shown in the image below, with the new panel on the left:</p> <p>[[img/new-panel.png]]</p> <blockquote><p>Check <a href="API-Editor">Editor API Reference</a> for more details about editor configurations</p></blockquote> <p>Now let's put some button inside</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span>
<span class="token literal-property property">panels</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">defaults</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">id</span> <span class="token operator">:</span> <span class="token string">'commands'</span><span class="token punctuation">,</span>
<span class="token literal-property property">buttons</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">id</span> <span class="token operator">:</span> <span class="token string">'smile'</span><span class="token punctuation">,</span>
<span class="token literal-property property">className</span> <span class="token operator">:</span> <span class="token string">'fa fa-smile-o'</span><span class="token punctuation">,</span>
<span class="token literal-property property">attributes</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Smile'</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token operator">...</span>
</code></pre></div><p>On refresh the page might present some changes ('fa fa-smile-o' are from FontAwesome set, so be sure to have placed correctly the font directory)</p> <p>[[img/new-btn.png]]</p> <p>Yeah, the button is pretty nice and happy, but useless without any command assigned, if you click on it nothing gonna happen.</p> <blockquote><p>Check <a href="API-Panels">Panels API Reference</a> for more details about Panels and Buttons</p></blockquote> <p>Assigning commands is pretty easy, but before you should define one or use one of defaults (<a href="./Built-in-commands">Built-in commands</a>). So in this case we gonna create a new one.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span>
<span class="token literal-property property">panels</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">defaults</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">id</span> <span class="token operator">:</span> <span class="token string">'commands'</span><span class="token punctuation">,</span>
<span class="token literal-property property">buttons</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">id</span> <span class="token operator">:</span> <span class="token string">'smile'</span><span class="token punctuation">,</span>
<span class="token literal-property property">className</span> <span class="token operator">:</span> <span class="token string">'fa fa-smile-o'</span><span class="token punctuation">,</span>
<span class="token literal-property property">attributes</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Smile'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">command</span> <span class="token operator">:</span> <span class="token string">'helloWorld'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">commands</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'helloWorld'</span><span class="token punctuation">,</span>
<span class="token function-variable function">run</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">editor<span class="token punctuation">,</span> senderBtn</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hello world!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Deactivate button</span>
senderBtn<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">stop</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">editor<span class="token punctuation">,</span> senderBtn</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token operator">...</span>
</code></pre></div><p>As you see we added a new command <code>helloWorld</code> and used its <code>id</code> as an identifier inside <code>button.command</code>. In addition to this we've also implemented two required methods, <code>run</code> and <code>stop</code>, to make button execute commands.</p> <p>[[img/btn-clicked.png]]</p> <blockquote><p>Check <a href="API-Commands">Commands API Reference</a></p></blockquote> <p>Check the <a href="http://grapesjs.com/demo.html" target="_blank" rel="noopener noreferrer">demo<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> for more complete usage of panels, buttons and built-in commands.</p> <h2 id="components"><a href="#components" class="header-anchor">#</a> Components</h2> <p>Components are elements inside the canvas, which can be drawn by commands or injected directly via configurations. In simple terms components represent the structure of our HTML document. You can init the editor with passing components as an HTML string</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span>
<span class="token comment">// Disable default local storage in case you've already used GrapesJS</span>
<span class="token literal-property property">storageManager</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token string">'&lt;div style=&quot;width:300px; min-height:100px; margin: 0 auto&quot;&gt;&lt;/div&gt;'</span> <span class="token operator">+</span>
<span class="token string">'&lt;div style=&quot;width:400px; min-height:100px; margin: 0 auto&quot;&gt;&lt;/div&gt;'</span> <span class="token operator">+</span>
<span class="token string">'&lt;div style=&quot;width:500px; min-height:100px; margin: 0 auto&quot;&gt;&lt;/div&gt;'</span><span class="token punctuation">,</span>
<span class="token operator">...</span>
</code></pre></div><p>We added 3 simple components with some basic style. If you refresh probably you'll see the same empty page but are actually there, you only need to highlight them.
For this purpose already exists a command, so add it to your panel in this way</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span>
<span class="token literal-property property">panels</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">defaults</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">id</span> <span class="token operator">:</span> <span class="token string">'commands'</span><span class="token punctuation">,</span>
<span class="token literal-property property">buttons</span> <span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'smile'</span><span class="token punctuation">,</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">id</span> <span class="token operator">:</span> <span class="token string">'vis'</span><span class="token punctuation">,</span>
<span class="token literal-property property">className</span> <span class="token operator">:</span> <span class="token string">'fa fa-eye'</span><span class="token punctuation">,</span>
<span class="token literal-property property">command</span> <span class="token operator">:</span> <span class="token string">'sw-visibility'</span><span class="token punctuation">,</span>
<span class="token literal-property property">context</span> <span class="token operator">:</span> <span class="token string">'some-random-context'</span><span class="token punctuation">,</span> <span class="token comment">// For grouping context of buttons in the same panel</span>
<span class="token literal-property property">active</span> <span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token operator">...</span>
</code></pre></div><p>Worth noting the use of <code>context</code> option (try to click 'smile' command without it) and <code>active</code> to enable it after the render.
Now you should be able to see blocks inside canvas.</p> <p>[[img/blocks3.jpg]]</p> <p>You could add other commands to enable interactions with blocks. Check <a href="./Built-in-commands">Built-in commands</a> to get more information</p> <blockquote><p>Check <a href="API-Components">Components API Reference</a></p></blockquote> <h2 id="style-manager"><a href="#style-manager" class="header-anchor">#</a> Style Manager</h2> <p>Any HTML structure requires, at some point, a proper style, so to meet this need the Style Manager was added as a built-in feature in GrapesJS. Style manager is composed by sectors, which group inside different types of CSS properties. So you can add, for instance, a <code>Dimension</code> sector for <code>width</code> and <code>height</code>, and another one as <code>Typography</code> for <code>font-size</code> and <code>color</code>. So it's up to you decide how organize sectors.</p> <p>To enable this module we rely on a built-in command <code>open-sm</code>, which shows up the Style Manager, which we gonna bind to another button in a separate panel</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span>
<span class="token literal-property property">panels</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">defaults</span> <span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">id</span> <span class="token operator">:</span> <span class="token string">'commands'</span><span class="token punctuation">,</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
<span class="token comment">// If you use this id the default CSS will place this panel on top right corner for you</span>
<span class="token literal-property property">id</span> <span class="token operator">:</span> <span class="token string">'views'</span><span class="token punctuation">,</span>
<span class="token literal-property property">buttons</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">id</span> <span class="token operator">:</span> <span class="token string">'open-style-manager'</span><span class="token punctuation">,</span>
<span class="token literal-property property">className</span> <span class="token operator">:</span> <span class="token string">'fa fa-paint-brush'</span><span class="token punctuation">,</span>
<span class="token literal-property property">command</span> <span class="token operator">:</span> <span class="token string">'open-sm'</span><span class="token punctuation">,</span>
<span class="token literal-property property">active</span> <span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token operator">...</span>
</code></pre></div><p>After this you'll be able to see something like in the image below</p> <p>[[img/enabled-sm.jpg]]</p> <p>As you can see Style Manager is enabled but before using it you have to select an element in the canvas, for this purpose we can add another button with a built-in command <code>select-comp</code> in this way</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span>
<span class="token literal-property property">panels</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">defaults</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">id</span> <span class="token operator">:</span> <span class="token string">'commands'</span><span class="token punctuation">,</span>
<span class="token literal-property property">buttons</span> <span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'smile'</span><span class="token punctuation">,</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
<span class="token literal-property property">id</span> <span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span>
<span class="token literal-property property">className</span> <span class="token operator">:</span> <span class="token string">'fa fa-mouse-pointer'</span><span class="token punctuation">,</span>
<span class="token literal-property property">command</span> <span class="token operator">:</span> <span class="token string">'select-comp'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token operator">...</span>
</code></pre></div><p>Selecting one of the component will show up the Style Manager with default sectors, properties and an input where you can manage classes. The default class you see (cXX) was generated by extracting style from the component</p> <p>[[img/default-sm.jpg]]</p> <p>As we exploring different configurations inside GrapesJS we gonna overwrite all the default sectors to create some custom one</p> <p>Let's put a few sectors with use of <code>buildProps</code> which helps us building common properties</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span>
<span class="token literal-property property">styleManager</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">sectors</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Dimension'</span><span class="token punctuation">,</span>
<span class="token literal-property property">buildProps</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'width'</span><span class="token punctuation">,</span> <span class="token string">'min-height'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Extra'</span><span class="token punctuation">,</span>
<span class="token literal-property property">buildProps</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'background-color'</span><span class="token punctuation">,</span> <span class="token string">'box-shadow'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token operator">...</span>
</code></pre></div><p>Now you should be able to style components</p> <p>[[img/style-comp.jpg]]</p> <p>You can check the list of usable properties inside <code>buildProps</code> here: <a href="./Built-in-properties">Built-in properties</a>
otherwise is possible to build them on your own, let's see how we'd have done the previous configuration without the <code>buildProps</code> helper</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span>
<span class="token literal-property property">styleManager</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">sectors</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Dimension'</span><span class="token punctuation">,</span>
<span class="token literal-property property">properties</span><span class="token operator">:</span><span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token comment">// Just the name</span>
<span class="token literal-property property">name</span> <span class="token operator">:</span> <span class="token string">'Width'</span><span class="token punctuation">,</span>
<span class="token comment">// CSS property</span>
<span class="token literal-property property">property</span> <span class="token operator">:</span> <span class="token string">'width'</span><span class="token punctuation">,</span>
<span class="token comment">// Type of the input, options: integer | radio | select | color | file | composite | stack</span>
<span class="token literal-property property">type</span> <span class="token operator">:</span> <span class="token string">'integer'</span><span class="token punctuation">,</span>
<span class="token comment">// Units, available only for 'integer' types</span>
<span class="token literal-property property">units</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">,</span> <span class="token string">'%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token comment">// Default value</span>
<span class="token literal-property property">defaults</span> <span class="token operator">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span>
<span class="token comment">// Min value, available only for 'integer' types</span>
<span class="token literal-property property">min</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
<span class="token comment">// Here I'm going to be more original</span>
<span class="token literal-property property">name</span> <span class="token operator">:</span> <span class="token string">'Minimum height'</span><span class="token punctuation">,</span>
<span class="token literal-property property">property</span> <span class="token operator">:</span> <span class="token string">'min-height'</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span> <span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaults</span> <span class="token operator">:</span> <span class="token string">'100px'</span><span class="token punctuation">,</span>
<span class="token comment">// List of options, available only for 'select' and 'radio' types</span>
<span class="token literal-property property">list</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">value</span> <span class="token operator">:</span> <span class="token string">'100px'</span><span class="token punctuation">,</span>
<span class="token literal-property property">name</span> <span class="token operator">:</span> <span class="token string">'100'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
<span class="token literal-property property">value</span> <span class="token operator">:</span> <span class="token string">'200px'</span><span class="token punctuation">,</span>
<span class="token literal-property property">name</span> <span class="token operator">:</span> <span class="token string">'200'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
<span class="token literal-property property">value</span> <span class="token operator">:</span> <span class="token string">'300px'</span><span class="token punctuation">,</span>
<span class="token literal-property property">name</span> <span class="token operator">:</span> <span class="token string">'300'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Extra'</span><span class="token punctuation">,</span>
<span class="token comment">// Sectors are expanded by default so put this one closed</span>
<span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">properties</span><span class="token operator">:</span><span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span> <span class="token operator">:</span> <span class="token string">'Background'</span><span class="token punctuation">,</span>
<span class="token literal-property property">property</span> <span class="token operator">:</span> <span class="token string">'background-color'</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span> <span class="token operator">:</span> <span class="token string">'color'</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token string">'none'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
<span class="token literal-property property">name</span> <span class="token operator">:</span> <span class="token string">'Box shadow'</span><span class="token punctuation">,</span>
<span class="token literal-property property">property</span> <span class="token operator">:</span> <span class="token string">'box-shadow'</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span> <span class="token operator">:</span> <span class="token string">'stack'</span><span class="token punctuation">,</span>
<span class="token literal-property property">preview</span> <span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token comment">// List of nested properties, available only for 'stack' and 'composite' types</span>
<span class="token literal-property property">properties</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Shadow type'</span><span class="token punctuation">,</span>
<span class="token comment">// Nested properties with stack/composite type don't require proper 'property' name</span>
<span class="token comment">// as all of them will be merged to parent property, eg. box-shadow: X Y ...;</span>
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'shadow-type'</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
<span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">value</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span> <span class="token operator">:</span> <span class="token string">'Outside'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">value</span> <span class="token operator">:</span> <span class="token string">'inset'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span> <span class="token operator">:</span> <span class="token string">'Inside'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'X position'</span><span class="token punctuation">,</span>
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'shadow-x'</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'integer'</span><span class="token punctuation">,</span>
<span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">,</span><span class="token string">'%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaults</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Y position'</span><span class="token punctuation">,</span>
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'shadow-y'</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'integer'</span><span class="token punctuation">,</span>
<span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">,</span><span class="token string">'%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaults</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Blur'</span><span class="token punctuation">,</span>
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'shadow-blur'</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'integer'</span><span class="token punctuation">,</span>
<span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaults</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Spread'</span><span class="token punctuation">,</span>
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'shadow-spread'</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'integer'</span><span class="token punctuation">,</span>
<span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaults</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Color'</span><span class="token punctuation">,</span>
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'shadow-color'</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'color'</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token string">'black'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token operator">...</span>
</code></pre></div><p>As you can see using <code>buildProps</code> actually will save you a lot of work. You could also mix this techniques to obtain custom properties in less time. For example, let's see how can we setup the same width but with a different value of <code>min</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span>
<span class="token literal-property property">styleManager</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">sectors</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Dimension'</span><span class="token punctuation">,</span>
<span class="token literal-property property">buildProps</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'width'</span><span class="token punctuation">,</span> <span class="token string">'min-height'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">properties</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'width'</span><span class="token punctuation">,</span> <span class="token comment">// Use 'property' as id</span>
<span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token number">30</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span>
<span class="token operator">...</span>
</code></pre></div><blockquote><p>Check <a href="API-Style-Manager">Style Manager API Reference</a></p></blockquote> <h2 id="store-load-data"><a href="#store-load-data" class="header-anchor">#</a> Store/load data</h2> <p>In this last part we're gonna see how to store and load template data inside GrapesJS. You may already noticed that even if you refresh the page after changes on canvas your data are not lost and this because GrapesJS comes with some built-in storage implementation.
The default one is the localStorage which is pretty simple and all the data are stored locally on your computer. Let's see the options available for this storage</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span>
<span class="token keyword">var</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">container</span> <span class="token operator">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span>
<span class="token operator">...</span>
<span class="token comment">// Default configuration</span>
<span class="token literal-property property">storageManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'gjs-'</span><span class="token punctuation">,</span> <span class="token comment">// Prefix identifier that will be used inside storing and loading</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'local'</span><span class="token punctuation">,</span> <span class="token comment">// Type of the storage</span>
<span class="token literal-property property">autosave</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Store data automatically</span>
<span class="token literal-property property">autoload</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Autoload stored data on init</span>
<span class="token literal-property property">stepsBeforeSave</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// If autosave enabled, indicates how many changes are necessary before store method is triggered</span>
<span class="token literal-property property">storeComponents</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Enable/Disable storing of components in JSON format</span>
<span class="token literal-property property">storeStyles</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Enable/Disable storing of rules/style in JSON format</span>
<span class="token literal-property property">storeHtml</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Enable/Disable storing of components as HTML string</span>
<span class="token literal-property property">storeCss</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Enable/Disable storing of rules/style as CSS string</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">...</span>
</code></pre></div><p>Worth noting the defaut <code>id</code> parameter which adds a prefix for all keys to store. If you check the localStorage inside your DOM panel you'll see something like <code>{ 'gjs-components': '&lt;div&gt;....' ...}</code> in this way it prevents the risk of collisions, quite common with localStorage use in large applications.</p> <p>Storing data locally it's easy and fast but useless in some common cases. In the next example we'll see how to setup a remote storage, which is not far from the previous one</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span>
<span class="token keyword">var</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">container</span> <span class="token operator">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span>
<span class="token operator">...</span>
<span class="token literal-property property">storageManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'remote'</span><span class="token punctuation">,</span>
<span class="token literal-property property">stepsBeforeSave</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
<span class="token literal-property property">urlStore</span><span class="token operator">:</span> <span class="token string">'http://store/endpoint'</span><span class="token punctuation">,</span>
<span class="token literal-property property">urlLoad</span><span class="token operator">:</span> <span class="token string">'http://load/endpoint'</span><span class="token punctuation">,</span>
<span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// For custom values on requests</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">...</span>
</code></pre></div><p>As you can see we've left some default option unchanged, increased changes necessary for autosave triggering and passed remote endpoints.</p> <p>If you prefer you could also disable autosaving and do it by yourself using some custom command in this way:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span>
<span class="token literal-property property">storageManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'remote'</span><span class="token punctuation">,</span>
<span class="token literal-property property">autosave</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token operator">...</span>
<span class="token literal-property property">commands</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'storeData'</span><span class="token punctuation">,</span>
<span class="token function-variable function">run</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">editor<span class="token punctuation">,</span> senderBtn</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
editor<span class="token punctuation">.</span><span class="token function">store</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token operator">...</span>
</code></pre></div><blockquote><p>Check <a href="API-Storage-Manager">Storage Manager API Reference</a></p></blockquote></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/Home.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">7/13/2018, 2:12:35 AM</span></div></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/docs/assets/js/app.5b6f2c9b.js" defer></script><script src="/docs/assets/js/11.905ee507.js" defer></script><script src="/docs/assets/js/2.789685b7.js" defer></script><script src="/docs/assets/js/19.1926f968.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 201 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>

After

Width:  |  Height:  |  Size: 216 B

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[11,13],{234:function(t,e,n){},235:function(t,e,n){"use strict";n(234)},264:function(t,e,n){"use strict";n.r(e);var a={render:t=>t("div",{class:"carbon-ads",attrs:{id:"native-carbon"}}),mounted(){window.BSANativeCallback=t=>{if(!t.ads.length){const t=document.createElement("script");t.src="//cdn.carbonads.com/carbon.js?serve=CEAIVK77&placement=grapesjscom",t.setAttribute("id","_carbonads_js");const e=document.getElementById("native-carbon");e&&e.appendChild(t)}},this.load()},watch:{$route(t,e){t.path!==e.path&&this.$el.querySelector("#carbonads")&&(this.$el.innerHTML="",this.load())}},methods:{initCarbon(){const{_bsa:t}=window;void 0!==t&&t&&t.init("default","CK7I62QJ","placement:grapesjscomdocs",{target:"#native-carbon"})},load(){const t=document.createElement("script");t.src="//m.servedby-buysellads.com/monetization.js",t.onload=()=>this.initCarbon(),this.$el.appendChild(t)}}},o=(n(235),n(13)),s=Object(o.a)(a,void 0,void 0,!1,null,null,null);e.default=s.exports},350:function(t,e,n){"use strict";n.r(e);var a=n(291),o=n(264),s={components:{Layout:a.a,CarbonAds:o.default}},c=n(13),i=Object(c.a)(s,(function(){var t=this._self._c;return t("Layout",[t("CarbonAds",{attrs:{slot:"sidebar-top"},slot:"sidebar-top"})],1)}),[],!1,null,null,null);e.default=i.exports}}]);

View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{250:function(t,n,s){},279:function(t,n,s){"use strict";s(250)},362:function(t,n,s){"use strict";s.r(n);s(279);var i=s(13),c=Object(i.a)({},(function(){return(0,this._self._c)("div",{staticClass:"demo-container"},[this._t("default")],2)}),[],!1,null,"b3715568",null);n.default=c.exports}}]);

View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{234:function(t,e,n){},235:function(t,e,n){"use strict";n(234)},264:function(t,e,n){"use strict";n.r(e);var a={render:t=>t("div",{class:"carbon-ads",attrs:{id:"native-carbon"}}),mounted(){window.BSANativeCallback=t=>{if(!t.ads.length){const t=document.createElement("script");t.src="//cdn.carbonads.com/carbon.js?serve=CEAIVK77&placement=grapesjscom",t.setAttribute("id","_carbonads_js");const e=document.getElementById("native-carbon");e&&e.appendChild(t)}},this.load()},watch:{$route(t,e){t.path!==e.path&&this.$el.querySelector("#carbonads")&&(this.$el.innerHTML="",this.load())}},methods:{initCarbon(){const{_bsa:t}=window;void 0!==t&&t&&t.init("default","CK7I62QJ","placement:grapesjscomdocs",{target:"#native-carbon"})},load(){const t=document.createElement("script");t.src="//m.servedby-buysellads.com/monetization.js",t.onload=()=>this.initCarbon(),this.$el.appendChild(t)}}},o=(n(235),n(13)),s=Object(o.a)(a,void 0,void 0,!1,null,null,null);e.default=s.exports}}]);

View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{261:function(t,e,n){},290:function(t,e,n){"use strict";n(261)},363:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:(t,{props:e,slots:n})=>t("span",{class:["badge",e.type],style:{verticalAlign:e.vertical}},e.text||n().default)},p=(n(290),n(13)),l=Object(p.a)(i,void 0,void 0,!1,null,"15b7b770",null);e.default=l.exports}}]);

View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{259:function(t,e,a){},288:function(t,e,a){"use strict";a(259)},359:function(t,e,a){"use strict";a.r(e);var s={name:"CodeBlock",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}},mounted(){this.$parent&&this.$parent.loadTabs&&this.$parent.loadTabs()}},i=(a(288),a(13)),n=Object(i.a)(s,(function(){return(0,this._self._c)("div",{staticClass:"theme-code-block",class:{"theme-code-block__active":this.active}},[this._t("default")],2)}),[],!1,null,"759a7d02",null);e.default=n.exports}}]);

View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{260:function(e,t,a){},289:function(e,t,a){"use strict";a(260)},360:function(e,t,a){"use strict";a.r(t);var o={name:"CodeGroup",data:()=>({codeTabs:[],activeCodeTabIndex:-1}),watch:{activeCodeTabIndex(e){this.activateCodeTab(e)}},mounted(){this.loadTabs()},methods:{changeCodeTab(e){this.activeCodeTabIndex=e},loadTabs(){this.codeTabs=(this.$slots.default||[]).filter(e=>Boolean(e.componentOptions)).map((e,t)=>(""===e.componentOptions.propsData.active&&(this.activeCodeTabIndex=t),{title:e.componentOptions.propsData.title,elm:e.elm})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab(e){this.codeTabs.forEach(e=>{e.elm&&e.elm.classList.remove("theme-code-block__active")}),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},s=(a(289),a(13)),c=Object(s.a)(o,(function(){var e=this,t=e._self._c;return t("ClientOnly",[t("div",{staticClass:"theme-code-group"},[t("div",{staticClass:"theme-code-group__nav"},[t("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(a,o){return t("li",{key:a.title,staticClass:"theme-code-group__li"},[t("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(o)}}},[e._v("\n "+e._s(a.title)+"\n ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?t("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"deefee04",null);t.default=c.exports}}]);

View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{357:function(e,t,r){"use strict";r.r(t);var l={name:"DemoViewer",props:{value:{type:String,default:""},user:{type:String,default:"artur_arseniev"},width:{type:String,default:"100%"},height:{type:String,default:"300"},darkcode:{type:Boolean,default:!1}},computed:{src(){const{value:e,user:t,darkcode:r}=this;return`//jsfiddle.net/${t}/${e}/embedded/js,html,css,result${r?"/dark/?menuColor=fff&fontColor=333&accentColor=e67891":""}`}}},s=r(13),n=Object(s.a)(l,(function(){return(0,this._self._c)("iframe",{attrs:{width:this.width,height:this.height,src:this.src,allowfullscreen:"allowfullscreen",frameborder:"0"}})}),[],!1,null,null,null);t.default=n.exports}}]);

View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{349:function(t,e,s){"use strict";s.r(e);const o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."];var n={methods:{getMsg:()=>o[Math.floor(Math.random()*o.length)]}},h=s(13),i=Object(h.a)(n,(function(){var t=this._self._c;return t("div",{staticClass:"theme-container"},[t("div",{staticClass:"theme-default-content"},[t("h1",[this._v("404")]),this._v(" "),t("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),t("RouterLink",{attrs:{to:"/"}},[this._v("\n Take me home.\n ")])],1)])}),[],!1,null,null,null);e.default=i.exports}}]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{378:function(t,e,s){"use strict";s.r(e);var o=s(13),a=Object(o.a)({},(function(){var t=this._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[t("h1",{attrs:{id:"api-reference"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api-reference"}},[this._v("#")]),this._v(" API Reference")]),this._v(" "),t("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),t("RouterLink",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])}),[],!1,null,null,null);e.default=a.exports}}]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{373:function(e,r,t){"use strict";t.r(r);var o=t(13),i=Object(o.a)({},(function(){var e=this,r=e._self._c;return r("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[r("h2",{attrs:{id:"device"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#device"}},[e._v("#")]),e._v(" Device")]),e._v(" "),r("h3",{attrs:{id:"properties"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[e._v("#")]),e._v(" Properties")]),e._v(" "),r("ul",[r("li",[r("code",[e._v("name")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1),e._v("?")]),e._v(" Device type, eg. "),r("code",[e._v("Mobile")])]),e._v(" "),r("li",[r("code",[e._v("width")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1),e._v("?")]),e._v(" Width to set for the editor iframe, eg. '900px'")]),e._v(" "),r("li",[r("code",[e._v("height")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1),e._v("?")]),e._v(" Height to set for the editor iframe, eg. '600px'")]),e._v(" "),r("li",[r("code",[e._v("widthMedia")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1),e._v("?")]),e._v(" The width which will be used in media queries, If empty the width will be used")]),e._v(" "),r("li",[r("code",[e._v("priority")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[e._v("Number"),r("OutboundLink")],1),e._v("?")]),e._v(" Setup the order of media queries")])])])}),[],!1,null,null,null);r.default=i.exports}}]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{376:function(e,r,t){"use strict";t.r(r);var o=t(13),a=Object(o.a)({},(function(){var e=this,r=e._self._c;return r("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[r("h2",{attrs:{id:"frame"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#frame"}},[e._v("#")]),e._v(" Frame")]),e._v(" "),r("h3",{attrs:{id:"properties"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[e._v("#")]),e._v(" Properties")]),e._v(" "),r("ul",[r("li",[r("code",[e._v("component")]),e._v(" "),r("strong",[e._v("("),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),r("OutboundLink")],1),e._v(" | "),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1),e._v(")")]),e._v(" Wrapper component definition. You can also pass an HTML string as components of the default wrapper component.")]),e._v(" "),r("li",[r("code",[e._v("width")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1),e._v("?")]),e._v(" Width of the frame. By default, the canvas width will be taken.")]),e._v(" "),r("li",[r("code",[e._v("height")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1),e._v("?")]),e._v(" Height of the frame. By default, the canvas height will be taken.")]),e._v(" "),r("li",[r("code",[e._v("x")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[e._v("Number"),r("OutboundLink")],1),e._v("?")]),e._v(" Horizontal position of the frame in the canvas.")]),e._v(" "),r("li",[r("code",[e._v("y")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[e._v("Number"),r("OutboundLink")],1),e._v("?")]),e._v(" Vertical position of the frame in the canvas.")])])])}),[],!1,null,null,null);r.default=a.exports}}]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{397:function(e,t,r){"use strict";r.r(t);var a=r(13),n=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h2",{attrs:{id:"state"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#state"}},[e._v("#")]),e._v(" State")]),e._v(" "),t("h3",{attrs:{id:"properties"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[e._v("#")]),e._v(" Properties")]),e._v(" "),t("ul",[t("li",[t("code",[e._v("name")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1)]),e._v(" State name, eg. "),t("code",[e._v("hover")]),e._v(", "),t("code",[e._v("nth-of-type(2n)")])]),e._v(" "),t("li",[t("code",[e._v("label")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1)]),e._v(" State label, eg. "),t("code",[e._v("Hover")]),e._v(", "),t("code",[e._v("Even/Odd")])])]),e._v(" "),t("h3",{attrs:{id:"getname"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#getname"}},[e._v("#")]),e._v(" getName")]),e._v(" "),t("p",[e._v("Get state name")]),e._v(" "),t("p",[e._v("Returns "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1)])]),e._v(" "),t("h3",{attrs:{id:"getlabel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#getlabel"}},[e._v("#")]),e._v(" getLabel")]),e._v(" "),t("p",[e._v("Get state label. If label was not provided, the name will be returned.")]),e._v(" "),t("p",[e._v("Returns "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1)])])])}),[],!1,null,null,null);t.default=n.exports}}]);

Some files were not shown because too many files have changed in this diff Show More