Update builder.html
Browse files- builder.html +1 -46
builder.html
CHANGED
|
@@ -8,7 +8,7 @@
|
|
| 8 |
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
|
| 9 |
|
| 10 |
<!-- Your Custom CSS -->
|
| 11 |
-
|
| 12 |
.gjs-row {
|
| 13 |
display: flex;
|
| 14 |
justify-content: space-between;
|
|
@@ -20,18 +20,6 @@
|
|
| 20 |
text-align: center;
|
| 21 |
min-height: 50px; /* Добавляем минимальную высоту для ячеек */
|
| 22 |
}
|
| 23 |
-
.my-button {
|
| 24 |
-
background-color: #4CAF50; /* Green */
|
| 25 |
-
border: none;
|
| 26 |
-
color: white;
|
| 27 |
-
padding: 15px 32px;
|
| 28 |
-
text-align: center;
|
| 29 |
-
text-decoration: none;
|
| 30 |
-
display: inline-block;
|
| 31 |
-
font-size: 16px;
|
| 32 |
-
margin: 4px 2px;
|
| 33 |
-
cursor: pointer;
|
| 34 |
-
}
|
| 35 |
</style>
|
| 36 |
</head>
|
| 37 |
<body>
|
|
@@ -89,33 +77,6 @@
|
|
| 89 |
});
|
| 90 |
|
| 91 |
// Define custom components
|
| 92 |
-
editor.Components.addType('custom-button', {
|
| 93 |
-
model: {
|
| 94 |
-
defaults: {
|
| 95 |
-
tagName: 'button',
|
| 96 |
-
traits: [
|
| 97 |
-
{
|
| 98 |
-
type: 'number',
|
| 99 |
-
label: 'Width',
|
| 100 |
-
name: 'width',
|
| 101 |
-
units: ['px', '%'],
|
| 102 |
-
min: 0,
|
| 103 |
-
default: '300px',
|
| 104 |
-
},
|
| 105 |
-
{
|
| 106 |
-
type: 'number',
|
| 107 |
-
label: 'Height',
|
| 108 |
-
name: 'height',
|
| 109 |
-
units: ['px', '%'],
|
| 110 |
-
min: 0,
|
| 111 |
-
default: '60px',
|
| 112 |
-
},
|
| 113 |
-
],
|
| 114 |
-
components: '<button class="my-button">Click Me</button>',
|
| 115 |
-
},
|
| 116 |
-
},
|
| 117 |
-
});
|
| 118 |
-
|
| 119 |
editor.Components.addType('custom-block', {
|
| 120 |
model: {
|
| 121 |
defaults: {
|
|
@@ -151,12 +112,6 @@
|
|
| 151 |
|
| 152 |
// Example of adding a block with custom components
|
| 153 |
const blockManager = editor.BlockManager;
|
| 154 |
-
blockManager.add('custom-button-block', {
|
| 155 |
-
label: 'Custom Button',
|
| 156 |
-
content: { type: 'custom-button' },
|
| 157 |
-
attributes: { class: 'gjs-block-section' }
|
| 158 |
-
});
|
| 159 |
-
|
| 160 |
blockManager.add('custom-block-block', {
|
| 161 |
label: 'Custom Block',
|
| 162 |
content: { type: 'custom-block' },
|
|
|
|
| 8 |
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
|
| 9 |
|
| 10 |
<!-- Your Custom CSS -->
|
| 11 |
+
<style>
|
| 12 |
.gjs-row {
|
| 13 |
display: flex;
|
| 14 |
justify-content: space-between;
|
|
|
|
| 20 |
text-align: center;
|
| 21 |
min-height: 50px; /* Добавляем минимальную высоту для ячеек */
|
| 22 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 23 |
</style>
|
| 24 |
</head>
|
| 25 |
<body>
|
|
|
|
| 77 |
});
|
| 78 |
|
| 79 |
// Define custom components
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 80 |
editor.Components.addType('custom-block', {
|
| 81 |
model: {
|
| 82 |
defaults: {
|
|
|
|
| 112 |
|
| 113 |
// Example of adding a block with custom components
|
| 114 |
const blockManager = editor.BlockManager;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 115 |
blockManager.add('custom-block-block', {
|
| 116 |
label: 'Custom Block',
|
| 117 |
content: { type: 'custom-block' },
|