File size: 6,876 Bytes
ca225b4 021045c ca225b4 2edf9e2 ca225b4 04760db 02f3215 90ce961 ca225b4 997bbcb 90ce961 997bbcb d62783d d44b4c8 6c69339 997bbcb 404af27 997bbcb d62783d 5a8ce60 997bbcb 90ce961 997bbcb ca225b4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GrapesJS Example</title>
<!-- GrapesJS CSS -->
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
</head>
<body>
<div id="gjs"></div>
<!-- GrapesJS JS -->
<script src="https://unpkg.com/grapesjs"></script>
<!-- Your Custom JS -->
<script>
const editor = grapesjs.init({
container: '#gjs',
fromElement: true,
height: '100vh',
storageManager: { type: 0 },
plugins: [],
pluginsOpts: {},
selectorManager: {
componentFirst: true,
},
styleManager: {
sectors: [
{
name: 'Layout',
properties: [
{
type: 'integer',
name: 'width',
units: ['px', '%'],
defaults: 'auto',
min: 0,
},
{
type: 'integer',
name: 'height',
units: ['px', '%'],
defaults: 'auto',
min: 0,
},
{
type: 'integer',
name: 'margin',
units: ['px', '%'],
defaults: '0',
},
{
type: 'integer',
name: 'padding',
units: ['px', '%'],
defaults: '10px',
},
],
},
{
name: 'Decorations',
properties: [
{
type: 'color',
name: 'background-color',
defaults: '#f0f0f0',
},
{
type: 'integer',
name: 'border-width',
units: ['px'],
defaults: '1px',
},
{
type: 'color',
name: 'border-color',
defaults: '#ccc',
},
],
},
{
name: 'Flex',
properties: [
{
type: 'select',
name: 'flex-direction',
defaults: 'row',
options: [
{ value: 'row', name: 'Row' },
{ value: 'column', name: 'Column' },
],
},
{
type: 'select',
name: 'justify-content',
defaults: 'space-between',
options: [
{ value: 'flex-start', name: 'Flex Start' },
{ value: 'flex-end', name: 'Flex End' },
{ value: 'center', name: 'Center' },
{ value: 'space-between', name: 'Space Between' },
{ value: 'space-around', name: 'Space Around' },
],
},
],
},
],
},
});
const domc = editor.DomComponents;
const bm = editor.BlockManager;
// Add a block with horizontal triple blocks
bm.add('horizontal-triple-block', {
label: 'Horizontal Triple Block',
content: `
<div style="display: flex; justify-content: space-between;">
<div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;">
<div data-gjs-type="block-container"></div>
</div>
<div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;">
<div data-gjs-type="block-container"></div>
</div>
<div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;">
<div data-gjs-type="block-container"></div>
</div>
</div>
`,
});
// Define a container for blocks
domc.addType('block-container', {
model: {
defaults: {
droppable: true,
components: [],
},
},
});
// Define a button to add new blocks
domc.addType('add-block-button', {
model: {
defaults: {
components: `
<button onclick="addNewBlock()">Add New Block</button>
`,
attributes: {
'data-gjs-type': 'add-block-button',
},
},
},
});
// Function to add new blocks
window.addNewBlock = function() {
const newBlock = `
<div style="display: flex; justify-content: space-between;">
<div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;"></div>
<div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;"></div>
<div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;"></div>
</div>
`;
editor.addComponents(newBlock);
};
// Add the button block
bm.add('add-block-button', {
label: 'Add Block Button',
content: {
type: 'add-block-button',
},
});
</script>
</body>
</html> |