DmitrMakeev commited on
Commit
9a58a1c
·
verified ·
1 Parent(s): 045031b

Update builder.html

Browse files
Files changed (1) hide show
  1. 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
- <!-- Your Custom CSS -->
12
- <style>
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
- // Example of adding a horizontal block with three items
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  const blockManager = editor.BlockManager;
91
- blockManager.add('horizontal-block', {
92
- label: 'Horizontal Block',
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
- // Example of adding a draggable button
104
- blockManager.add('draggable-button', {
105
- label: 'Draggable Button',
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>