Update builder.html
Browse files- builder.html +74 -18
builder.html
CHANGED
@@ -8,11 +8,13 @@
|
|
8 |
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
|
9 |
|
10 |
<!-- Your Custom CSS -->
|
11 |
-
|
12 |
-
|
13 |
-
|
|
|
|
|
|
|
14 |
.gjs-cell {
|
15 |
-
flex: 1;
|
16 |
border: 1px solid #ccc; /* Добавляем контур для ячеек */
|
17 |
padding: 10px;
|
18 |
text-align: center;
|
@@ -86,24 +88,78 @@
|
|
86 |
},
|
87 |
});
|
88 |
|
89 |
-
//
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
90 |
const blockManager = editor.BlockManager;
|
91 |
-
blockManager.add('
|
92 |
-
label: '
|
93 |
-
content:
|
94 |
-
<div class="gjs-row">
|
95 |
-
<div class="gjs-cell"></div>
|
96 |
-
<div class="gjs-cell"></div>
|
97 |
-
<div class="gjs-cell"></div>
|
98 |
-
</div>
|
99 |
-
`,
|
100 |
attributes: { class: 'gjs-block-section' }
|
101 |
});
|
102 |
|
103 |
-
|
104 |
-
|
105 |
-
|
106 |
-
content: `<button class="my-button">Click Me</button>`,
|
107 |
attributes: { class: 'gjs-block-section' }
|
108 |
});
|
109 |
</script>
|
|
|
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;
|
15 |
+
border: 1px dashed #ccc; /* Добавляем контур для строк */
|
16 |
+
}
|
17 |
.gjs-cell {
|
|
|
18 |
border: 1px solid #ccc; /* Добавляем контур для ячеек */
|
19 |
padding: 10px;
|
20 |
text-align: center;
|
|
|
88 |
},
|
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: {
|
122 |
+
tagName: 'div',
|
123 |
+
traits: [
|
124 |
+
{
|
125 |
+
type: 'number',
|
126 |
+
label: 'Width',
|
127 |
+
name: 'width',
|
128 |
+
units: ['px', '%'],
|
129 |
+
min: 0,
|
130 |
+
default: '300px',
|
131 |
+
},
|
132 |
+
{
|
133 |
+
type: 'number',
|
134 |
+
label: 'Height',
|
135 |
+
name: 'height',
|
136 |
+
units: ['px', '%'],
|
137 |
+
min: 0,
|
138 |
+
default: '60px',
|
139 |
+
},
|
140 |
+
],
|
141 |
+
components: `
|
142 |
+
<div class="gjs-row">
|
143 |
+
<div class="gjs-cell"></div>
|
144 |
+
<div class="gjs-cell"></div>
|
145 |
+
<div class="gjs-cell"></div>
|
146 |
+
</div>
|
147 |
+
`,
|
148 |
+
},
|
149 |
+
},
|
150 |
+
});
|
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' },
|
|
|
163 |
attributes: { class: 'gjs-block-section' }
|
164 |
});
|
165 |
</script>
|