|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<title>GrapesJS</title> |
|
|
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"> |
|
|
<script src="https://unpkg.com/grapesjs"></script> |
|
|
|
|
|
<script src="https://unpkg.com/grapesjs-custom-code/dist/grapesjs-custom-code.min.js"></script> |
|
|
|
|
|
|
|
|
<style> |
|
|
body, |
|
|
html { |
|
|
height: 100%; |
|
|
margin: 0; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<div id="gjs" style="height:0px; overflow:hidden;"> |
|
|
<div class="panel"> |
|
|
<h1 class="welcome">Welcome to</h1> |
|
|
<div class="big-title"> |
|
|
<svg class="logo" viewBox="0 0 100 100"> |
|
|
<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"/> |
|
|
</svg> |
|
|
<span>GrapesJS</span> |
|
|
</div> |
|
|
<div class="description"> |
|
|
This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can |
|
|
copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git. |
|
|
</div> |
|
|
<button class="add-button">Ещё добавь</button> |
|
|
</div> |
|
|
<style> |
|
|
.panel { |
|
|
width: 90%; |
|
|
max-width: 700px; |
|
|
border-radius: 3px; |
|
|
padding: 30px 20px; |
|
|
margin: 150px auto 0px; |
|
|
background-color: #d983a6; |
|
|
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25); |
|
|
color:rgba(255,255,255,0.75); |
|
|
font: caption; |
|
|
font-weight: 100; |
|
|
} |
|
|
.welcome { |
|
|
text-align: center; |
|
|
font-weight: 100; |
|
|
margin: 0px; |
|
|
} |
|
|
.logo { |
|
|
width: 70px; |
|
|
height: 70px; |
|
|
vertical-align: middle; |
|
|
} |
|
|
.logo path { |
|
|
pointer-events: none; |
|
|
fill: none; |
|
|
stroke-linecap: round; |
|
|
stroke-width: 7; |
|
|
stroke: #fff |
|
|
} |
|
|
.big-title { |
|
|
text-align: center; |
|
|
font-size: 3.5rem; |
|
|
margin: 15px 0; |
|
|
} |
|
|
.description { |
|
|
text-align: justify; |
|
|
font-size: 1rem; |
|
|
line-height: 1.5rem; |
|
|
} |
|
|
.add-button { |
|
|
display: block; |
|
|
margin: 20px auto 0; |
|
|
padding: 10px 20px; |
|
|
font-size: 1rem; |
|
|
color: #fff; |
|
|
background-color: #007bff; |
|
|
border: none; |
|
|
border-radius: 5px; |
|
|
cursor: pointer; |
|
|
} |
|
|
</style> |
|
|
</div> |
|
|
|
|
|
<script type="text/javascript"> |
|
|
var editor = grapesjs.init({ |
|
|
showOffsets: 1, |
|
|
noticeOnUnload: 0, |
|
|
container: '#gjs', |
|
|
height: '100%', |
|
|
fromElement: true, |
|
|
storageManager: { autoload: 0 }, |
|
|
styleManager : { |
|
|
sectors: [{ |
|
|
name: 'General', |
|
|
open: false, |
|
|
buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'] |
|
|
},{ |
|
|
name: 'Flex', |
|
|
open: false, |
|
|
buildProps: ['flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-content', 'order', 'flex-basis', 'flex-grow', 'flex-shrink', 'align-self'] |
|
|
},{ |
|
|
name: 'Dimension', |
|
|
open: false, |
|
|
buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'], |
|
|
},{ |
|
|
name: 'Typography', |
|
|
open: false, |
|
|
buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-shadow'], |
|
|
},{ |
|
|
name: 'Decorations', |
|
|
open: false, |
|
|
buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'], |
|
|
},{ |
|
|
name: 'Extra', |
|
|
open: false, |
|
|
buildProps: ['transition', 'perspective', 'transform'], |
|
|
} |
|
|
], |
|
|
}, |
|
|
}); |
|
|
|
|
|
|
|
|
editor.BlockManager.add('welcome-block', { |
|
|
label: 'Welcome Title', |
|
|
content: `<h1 class="welcome">Welcome to</h1>` |
|
|
}); |
|
|
|
|
|
editor.BlockManager.add('big-title-block', { |
|
|
label: 'Big Title', |
|
|
content: ` |
|
|
<div class="big-title"> |
|
|
<svg class="logo" viewBox="0 0 100 100"> |
|
|
<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"/> |
|
|
</svg> |
|
|
<span>GrapesJS</span> |
|
|
</div> |
|
|
` |
|
|
}); |
|
|
|
|
|
editor.BlockManager.add('description-block', { |
|
|
label: 'Description', |
|
|
content: `<div class="description">This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.</div>` |
|
|
}); |
|
|
|
|
|
editor.BlockManager.add('button-block', { |
|
|
label: 'Add Button', |
|
|
content: `<button class="add-button">Ещё добавь</button>` |
|
|
}); |
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript"> |
|
|
var editor = grapesjs.init({ |
|
|
container : '#gjs', |
|
|
... |
|
|
plugins: ['grapesjs-custom-code'], |
|
|
pluginsOpts: { |
|
|
'grapesjs-custom-code': { |
|
|
|
|
|
} |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
|
|
|
|
|
|
</body> |
|
|
</html> |
