Create builder2.html
Browse files- builder2.html +83 -0
builder2.html
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<title>GrapesJS with Basic Blocks</title>
|
| 6 |
+
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
|
| 7 |
+
<script src="https://unpkg.com/grapesjs"></script>
|
| 8 |
+
<script src="path/to/grapesjs-blocks-basic.min.js"></script>
|
| 9 |
+
<style>
|
| 10 |
+
body, html {
|
| 11 |
+
height: 100%;
|
| 12 |
+
margin: 0;
|
| 13 |
+
}
|
| 14 |
+
</style>
|
| 15 |
+
</head>
|
| 16 |
+
<body>
|
| 17 |
+
<div id="gjs" style="height:0px; overflow:hidden;">
|
| 18 |
+
<div class="panel">
|
| 19 |
+
<h1 class="welcome">Welcome to</h1>
|
| 20 |
+
<div class="big-title">
|
| 21 |
+
<svg class="logo" viewBox="0 0 100 100">
|
| 22 |
+
<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"/>
|
| 23 |
+
</svg>
|
| 24 |
+
<span>GrapesJS</span>
|
| 25 |
+
</div>
|
| 26 |
+
<div class="description">
|
| 27 |
+
This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
|
| 28 |
+
copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
|
| 29 |
+
</div>
|
| 30 |
+
<button class="add-button">Ещё добавь</button>
|
| 31 |
+
</div>
|
| 32 |
+
</div>
|
| 33 |
+
|
| 34 |
+
<script type="text/javascript">
|
| 35 |
+
var editor = grapesjs.init({
|
| 36 |
+
fromElement: 1,
|
| 37 |
+
container: "#gjs",
|
| 38 |
+
plugins: ["gjs-blocks-basic"],
|
| 39 |
+
pluginsOpts: {
|
| 40 |
+
"gjs-blocks-basic": {
|
| 41 |
+
blocks: ['column1', 'column2', 'column3', 'column3-7'],
|
| 42 |
+
category: 'Basic',
|
| 43 |
+
flexGrid: false,
|
| 44 |
+
stylePrefix: 'gjs-',
|
| 45 |
+
addBasicStyle: true,
|
| 46 |
+
labelColumn1: '1 Column',
|
| 47 |
+
labelColumn2: '2 Columns',
|
| 48 |
+
labelColumn3: '3 Columns',
|
| 49 |
+
labelColumn37: '2 Columns 3/7',
|
| 50 |
+
rowHeight: 75
|
| 51 |
+
}
|
| 52 |
+
}
|
| 53 |
+
});
|
| 54 |
+
|
| 55 |
+
editor.BlockManager.add('welcome-block', {
|
| 56 |
+
label: 'Welcome Title',
|
| 57 |
+
content: `<h1 class="welcome">Welcome to</h1>`
|
| 58 |
+
});
|
| 59 |
+
|
| 60 |
+
editor.BlockManager.add('big-title-block', {
|
| 61 |
+
label: 'Big Title',
|
| 62 |
+
content: `
|
| 63 |
+
<div class="big-title">
|
| 64 |
+
<svg class="logo" viewBox="0 0 100 100">
|
| 65 |
+
<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"/>
|
| 66 |
+
</svg>
|
| 67 |
+
<span>GrapesJS</span>
|
| 68 |
+
</div>
|
| 69 |
+
`
|
| 70 |
+
});
|
| 71 |
+
|
| 72 |
+
editor.BlockManager.add('description-block', {
|
| 73 |
+
label: 'Description',
|
| 74 |
+
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>`
|
| 75 |
+
});
|
| 76 |
+
|
| 77 |
+
editor.BlockManager.add('button-block', {
|
| 78 |
+
label: 'Add Button',
|
| 79 |
+
content: `<button class="add-button">Ещё добавь</button>`
|
| 80 |
+
});
|
| 81 |
+
</script>
|
| 82 |
+
</body>
|
| 83 |
+
</html>
|