Update pages.html
Browse files- pages.html +117 -72
pages.html
CHANGED
@@ -270,80 +270,125 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
|
|
270 |
</div>
|
271 |
<script>
|
272 |
// Инициализация GrapesJS редактора
|
273 |
-
|
274 |
-
|
275 |
-
|
276 |
-
|
277 |
-
|
278 |
-
|
279 |
-
|
280 |
-
|
281 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
282 |
},
|
283 |
-
|
284 |
-
|
285 |
-
|
286 |
-
"grapesjs-component-code-editor",
|
287 |
-
"grapesjs-templates",
|
288 |
-
"grapesjs-rte-extensions",
|
289 |
-
"grapesjs-user-blocks"
|
290 |
-
],
|
291 |
-
pluginsOpts: {
|
292 |
-
"gjs-blocks-basic": {
|
293 |
-
blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'quote', 'social'],
|
294 |
-
blocksBasicOpts: {
|
295 |
-
flexGrid: true,
|
296 |
-
stylePrefix: 'gjs-',
|
297 |
-
columns: 12,
|
298 |
-
rowHeight: 75,
|
299 |
-
addBasicStyle: true
|
300 |
-
}
|
301 |
-
},
|
302 |
-
"grapesjs-component-code-editor": {
|
303 |
-
panelId: 'views-container',
|
304 |
-
appendTo: '.gjs-pn-views-container',
|
305 |
-
openState: { pn: '35%', cv: '65%' },
|
306 |
-
closedState: { pn: '15%', cv: '85%' },
|
307 |
-
codeViewOptions: {},
|
308 |
-
preserveWidth: false,
|
309 |
-
clearData: false,
|
310 |
-
editJs: true,
|
311 |
-
cleanCssBtn: true,
|
312 |
-
htmlBtnText: 'Применить',
|
313 |
-
cssBtnText: 'Применить',
|
314 |
-
cleanCssBtnText: 'Удалить'
|
315 |
-
},
|
316 |
-
"grapesjs-templates": {
|
317 |
-
// Настройки для grapesjs-templates
|
318 |
-
},
|
319 |
-
"grapesjs-rte-extensions": {
|
320 |
-
base: {
|
321 |
-
bold: true,
|
322 |
-
italic: true,
|
323 |
-
underline: true,
|
324 |
-
strikethrough: true,
|
325 |
-
link: true,
|
326 |
-
},
|
327 |
-
fonts: {
|
328 |
-
fontColor: true,
|
329 |
-
hilite: true,
|
330 |
-
},
|
331 |
-
format: {
|
332 |
-
heading1: true,
|
333 |
-
heading2: true,
|
334 |
-
heading3: true,
|
335 |
-
paragraph: true,
|
336 |
-
clearFormatting: true,
|
337 |
-
},
|
338 |
-
align: true,
|
339 |
-
darkColorPicker: true,
|
340 |
-
maxWidth: '600px'
|
341 |
-
},
|
342 |
-
"grapesjs-user-blocks": {
|
343 |
-
// Настройки для grapesjs-user-blocks
|
344 |
-
}
|
345 |
},
|
346 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
347 |
// Добавление русского языка
|
348 |
editor.I18n.addMessages({
|
349 |
ru: {
|
|
|
270 |
</div>
|
271 |
<script>
|
272 |
// Инициализация GrapesJS редактора
|
273 |
+
const editor = grapesjs.init({
|
274 |
+
container: "#gjs",
|
275 |
+
fromElement: true,
|
276 |
+
height: "100vh",
|
277 |
+
storageManager: {
|
278 |
+
type: 'local',
|
279 |
+
autosave: true,
|
280 |
+
autoload: true,
|
281 |
+
stepsBeforeSave: 1,
|
282 |
+
},
|
283 |
+
plugins: [
|
284 |
+
"gjs-blocks-basic",
|
285 |
+
"grapesjs-component-countdown",
|
286 |
+
"grapesjs-component-code-editor",
|
287 |
+
"grapesjs-templates",
|
288 |
+
"grapesjs-rte-extensions",
|
289 |
+
"grapesjs-user-blocks"
|
290 |
+
],
|
291 |
+
pluginsOpts: {
|
292 |
+
"gjs-blocks-basic": {
|
293 |
+
blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'quote', 'social'],
|
294 |
+
blocksBasicOpts: {
|
295 |
+
flexGrid: true,
|
296 |
+
stylePrefix: 'gjs-',
|
297 |
+
columns: 12,
|
298 |
+
rowHeight: 75,
|
299 |
+
addBasicStyle: true
|
300 |
+
}
|
301 |
+
},
|
302 |
+
"grapesjs-component-code-editor": {
|
303 |
+
panelId: 'views-container',
|
304 |
+
appendTo: '.gjs-pn-views-container',
|
305 |
+
openState: { pn: '35%', cv: '65%' },
|
306 |
+
closedState: { pn: '15%', cv: '85%' },
|
307 |
+
codeViewOptions: {},
|
308 |
+
preserveWidth: false,
|
309 |
+
clearData: false,
|
310 |
+
editJs: true,
|
311 |
+
cleanCssBtn: true,
|
312 |
+
htmlBtnText: 'Применить',
|
313 |
+
cssBtnText: 'Применить',
|
314 |
+
cleanCssBtnText: 'Удалить'
|
315 |
+
},
|
316 |
+
"grapesjs-templates": {
|
317 |
+
// Настройки для grapesjs-templates
|
318 |
+
},
|
319 |
+
"grapesjs-rte-extensions": {
|
320 |
+
base: {
|
321 |
+
bold: true,
|
322 |
+
italic: true,
|
323 |
+
underline: true,
|
324 |
+
strikethrough: true,
|
325 |
+
link: true,
|
326 |
},
|
327 |
+
fonts: {
|
328 |
+
fontColor: true,
|
329 |
+
hilite: true,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
330 |
},
|
331 |
+
format: {
|
332 |
+
heading1: true,
|
333 |
+
heading2: true,
|
334 |
+
heading3: true,
|
335 |
+
paragraph: true,
|
336 |
+
clearFormatting: true,
|
337 |
+
},
|
338 |
+
align: true,
|
339 |
+
darkColorPicker: true,
|
340 |
+
maxWidth: '600px'
|
341 |
+
},
|
342 |
+
"grapesjs-user-blocks": {
|
343 |
+
// Настройки для grapesjs-user-blocks
|
344 |
+
}
|
345 |
+
},
|
346 |
+
});
|
347 |
+
|
348 |
+
|
349 |
+
|
350 |
+
editor.BlockManager.add('custom-player', {
|
351 |
+
label: 'Custom Player',
|
352 |
+
content: `<div id="player" style="width: 480px; height: 270px; border: 3px solid black; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>`,
|
353 |
+
attributes: {
|
354 |
+
class: 'fa fa-play'
|
355 |
+
}
|
356 |
+
});
|
357 |
+
editor.CssComposer.addRules(`
|
358 |
+
#player {
|
359 |
+
width: 480px;
|
360 |
+
height: 270px;
|
361 |
+
border: 3px solid black;
|
362 |
+
margin: auto;
|
363 |
+
position: absolute;
|
364 |
+
top: 0;
|
365 |
+
bottom: 0;
|
366 |
+
left: 0;
|
367 |
+
right: 0;
|
368 |
+
}
|
369 |
+
`);
|
370 |
+
|
371 |
+
|
372 |
+
|
373 |
+
|
374 |
+
|
375 |
+
|
376 |
+
|
377 |
+
|
378 |
+
|
379 |
+
|
380 |
+
|
381 |
+
|
382 |
+
|
383 |
+
|
384 |
+
|
385 |
+
|
386 |
+
|
387 |
+
|
388 |
+
|
389 |
+
|
390 |
+
|
391 |
+
|
392 |
// Добавление русского языка
|
393 |
editor.I18n.addMessages({
|
394 |
ru: {
|