|
|
@ -81,196 +81,80 @@ |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script type="text/javascript"> |
|
|
<script type="text/javascript"> |
|
|
const editortest = grapesjs.init({ |
|
|
var editor = grapesjs.init({ |
|
|
headless: true, |
|
|
showOffsets: 1, |
|
|
projectData: { |
|
|
noticeOnUnload: 0, |
|
|
pages: [ |
|
|
container: '#gjs', |
|
|
|
|
|
height: '100%', |
|
|
|
|
|
fromElement: true, |
|
|
|
|
|
storageManager: { autoload: 0 }, |
|
|
|
|
|
styleManager: { |
|
|
|
|
|
sectors: [ |
|
|
{ |
|
|
{ |
|
|
frames: [ |
|
|
name: 'General', |
|
|
{ |
|
|
open: false, |
|
|
component: { |
|
|
buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'], |
|
|
type: 'wrapper', |
|
|
}, |
|
|
stylable: [ |
|
|
{ |
|
|
'background', |
|
|
name: 'Flex', |
|
|
'background-color', |
|
|
open: false, |
|
|
'background-image', |
|
|
buildProps: [ |
|
|
'background-repeat', |
|
|
'flex-direction', |
|
|
'background-attachment', |
|
|
'flex-wrap', |
|
|
'background-position', |
|
|
'justify-content', |
|
|
'background-size', |
|
|
'align-items', |
|
|
], |
|
|
'align-content', |
|
|
attributes: { |
|
|
'order', |
|
|
id: 'body', |
|
|
'flex-basis', |
|
|
}, |
|
|
'flex-grow', |
|
|
components: [ |
|
|
'flex-shrink', |
|
|
{ |
|
|
'align-self', |
|
|
tagName: 'section', |
|
|
|
|
|
components: [ |
|
|
|
|
|
{ |
|
|
|
|
|
tagName: 'h1', |
|
|
|
|
|
type: 'text', |
|
|
|
|
|
attributes: { |
|
|
|
|
|
id: 'main-title', |
|
|
|
|
|
}, |
|
|
|
|
|
components: [ |
|
|
|
|
|
{ |
|
|
|
|
|
type: 'textnode', |
|
|
|
|
|
content: 'This is a simple title', |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
type: 'text', |
|
|
|
|
|
components: [ |
|
|
|
|
|
{ |
|
|
|
|
|
type: 'textnode', |
|
|
|
|
|
content: 'This is just a Lorem text: Lorem ipsum dolor sit amet', |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
], |
|
|
id: 'ljc0blhC1ZeiCYyY', |
|
|
|
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
frames: [ |
|
|
name: 'Dimension', |
|
|
{ |
|
|
open: false, |
|
|
component: { |
|
|
buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'], |
|
|
type: 'wrapper', |
|
|
}, |
|
|
stylable: [ |
|
|
{ |
|
|
'background', |
|
|
name: 'Typography', |
|
|
'background-color', |
|
|
open: false, |
|
|
'background-image', |
|
|
buildProps: [ |
|
|
'background-repeat', |
|
|
'font-family', |
|
|
'background-attachment', |
|
|
'font-size', |
|
|
'background-position', |
|
|
'font-weight', |
|
|
'background-size', |
|
|
'letter-spacing', |
|
|
], |
|
|
'color', |
|
|
attributes: { |
|
|
'line-height', |
|
|
id: 'body', |
|
|
'text-shadow', |
|
|
}, |
|
|
|
|
|
components: [ |
|
|
|
|
|
{ |
|
|
|
|
|
tagName: 'section', |
|
|
|
|
|
components: [ |
|
|
|
|
|
{ |
|
|
|
|
|
tagName: 'h1', |
|
|
|
|
|
type: 'text', |
|
|
|
|
|
attributes: { |
|
|
|
|
|
id: 'main-title', |
|
|
|
|
|
}, |
|
|
|
|
|
components: [ |
|
|
|
|
|
{ |
|
|
|
|
|
type: 'textnode', |
|
|
|
|
|
content: 'This is another title', |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
type: 'text', |
|
|
|
|
|
components: [ |
|
|
|
|
|
{ |
|
|
|
|
|
type: 'textnode', |
|
|
|
|
|
content: 'Some other text', |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
], |
|
|
id: '1zKkQnGVzy8nKXKE', |
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
name: 'Decorations', |
|
|
|
|
|
open: false, |
|
|
|
|
|
buildProps: [ |
|
|
|
|
|
'border-radius-c', |
|
|
|
|
|
'background-color', |
|
|
|
|
|
'border-radius', |
|
|
|
|
|
'border', |
|
|
|
|
|
'box-shadow', |
|
|
|
|
|
'background', |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
name: 'Extra', |
|
|
|
|
|
open: false, |
|
|
|
|
|
buildProps: ['transition', 'perspective', 'transform'], |
|
|
}, |
|
|
}, |
|
|
], |
|
|
], |
|
|
}, |
|
|
}, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
let pages = editortest.Pages.getAll().map((page) => { |
|
|
editor.BlockManager.add('testBlock', { |
|
|
const component = page.getMainComponent(); |
|
|
label: 'Block', |
|
|
return editortest.getHtml({ component }); |
|
|
attributes: { class: 'gjs-fonts gjs-f-b1' }, |
|
|
|
|
|
content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
console.log(pages); |
|
|
|
|
|
// var editor = grapesjs.init({ |
|
|
|
|
|
// showOffsets: 1, |
|
|
|
|
|
// noticeOnUnload: 0, |
|
|
|
|
|
// container: '#gjs', |
|
|
|
|
|
// height: '100%', |
|
|
|
|
|
// fromElement: true, |
|
|
|
|
|
// storageManager: { autoload: 0 }, |
|
|
|
|
|
// styleManager: { |
|
|
|
|
|
// sectors: [ |
|
|
|
|
|
// { |
|
|
|
|
|
// name: 'General', |
|
|
|
|
|
// open: false, |
|
|
|
|
|
// buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'], |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// name: 'Flex', |
|
|
|
|
|
// open: false, |
|
|
|
|
|
// buildProps: [ |
|
|
|
|
|
// 'flex-direction', |
|
|
|
|
|
// 'flex-wrap', |
|
|
|
|
|
// 'justify-content', |
|
|
|
|
|
// 'align-items', |
|
|
|
|
|
// 'align-content', |
|
|
|
|
|
// 'order', |
|
|
|
|
|
// 'flex-basis', |
|
|
|
|
|
// 'flex-grow', |
|
|
|
|
|
// 'flex-shrink', |
|
|
|
|
|
// 'align-self', |
|
|
|
|
|
// ], |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// name: 'Dimension', |
|
|
|
|
|
// open: false, |
|
|
|
|
|
// buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'], |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// name: 'Typography', |
|
|
|
|
|
// open: false, |
|
|
|
|
|
// buildProps: [ |
|
|
|
|
|
// 'font-family', |
|
|
|
|
|
// 'font-size', |
|
|
|
|
|
// 'font-weight', |
|
|
|
|
|
// 'letter-spacing', |
|
|
|
|
|
// 'color', |
|
|
|
|
|
// 'line-height', |
|
|
|
|
|
// 'text-shadow', |
|
|
|
|
|
// ], |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// name: 'Decorations', |
|
|
|
|
|
// open: false, |
|
|
|
|
|
// buildProps: [ |
|
|
|
|
|
// 'border-radius-c', |
|
|
|
|
|
// 'background-color', |
|
|
|
|
|
// 'border-radius', |
|
|
|
|
|
// 'border', |
|
|
|
|
|
// 'box-shadow', |
|
|
|
|
|
// 'background', |
|
|
|
|
|
// ], |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// name: 'Extra', |
|
|
|
|
|
// open: false, |
|
|
|
|
|
// buildProps: ['transition', 'perspective', 'transform'], |
|
|
|
|
|
// }, |
|
|
|
|
|
// ], |
|
|
|
|
|
// }, |
|
|
|
|
|
// }); |
|
|
|
|
|
|
|
|
|
|
|
// editor.BlockManager.add('testBlock', { |
|
|
|
|
|
// label: 'Block', |
|
|
|
|
|
// attributes: { class: 'gjs-fonts gjs-f-b1' }, |
|
|
|
|
|
// content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`, |
|
|
|
|
|
// }); |
|
|
|
|
|
</script> |
|
|
</script> |
|
|
</body> |
|
|
</body> |
|
|
</html> |
|
|
</html> |
|
|
|
Kaleniuk
2 months ago