|
|
@ -5,18 +5,19 @@ |
|
|
<title>GrapesJS Demo - Free Open Source Website Page Builder</title> |
|
|
<title>GrapesJS Demo - Free Open Source Website Page Builder</title> |
|
|
<meta content="Best Free Open Source Responsive Websites Builder" name="description"> |
|
|
<meta content="Best Free Open Source Responsive Websites Builder" name="description"> |
|
|
<link rel="stylesheet" href="stylesheets/toastr.min.css"> |
|
|
<link rel="stylesheet" href="stylesheets/toastr.min.css"> |
|
|
<link rel="stylesheet" href="stylesheets/grapes.min.css?v0.16.2"> |
|
|
<link rel="stylesheet" href="stylesheets/grapes.min.css?v0.16.3"> |
|
|
<link rel="stylesheet" href="stylesheets/grapesjs-preset-webpage.min.css"> |
|
|
<link rel="stylesheet" href="stylesheets/grapesjs-preset-webpage.min.css"> |
|
|
<link rel="stylesheet" href="stylesheets/tooltip.css"> |
|
|
<link rel="stylesheet" href="stylesheets/tooltip.css"> |
|
|
<link rel="stylesheet" href="stylesheets/grapesjs-plugin-filestack.css"> |
|
|
<link rel="stylesheet" href="stylesheets/grapesjs-plugin-filestack.css"> |
|
|
<link rel="stylesheet" href="stylesheets/demos.css?v3"> |
|
|
<link rel="stylesheet" href="stylesheets/demos.css?v3"> |
|
|
|
|
|
<link href="https://unpkg.com/grapick/dist/grapick.min.css" rel="stylesheet"> |
|
|
|
|
|
|
|
|
<!-- <script src="//static.filestackapi.com/v3/filestack.js"></script> --> |
|
|
<!-- <script src="//static.filestackapi.com/v3/filestack.js"></script> --> |
|
|
<!-- <script src="js/aviary.js"></script> old //feather.aviary.com/imaging/v3/editor.js --> |
|
|
<!-- <script src="js/aviary.js"></script> old //feather.aviary.com/imaging/v3/editor.js --> |
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
|
|
<script src="js/toastr.min.js"></script> |
|
|
<script src="js/toastr.min.js"></script> |
|
|
|
|
|
|
|
|
<script src="js/grapes.min.js?v0.16.2"></script> |
|
|
<script src="js/grapes.min.js?v0.16.3"></script> |
|
|
<script src="js/grapesjs-preset-webpage.min.js?v0.1.11"></script> |
|
|
<script src="js/grapesjs-preset-webpage.min.js?v0.1.11"></script> |
|
|
<script src="js/grapesjs-lory-slider.min.js?0.1.5"></script> |
|
|
<script src="js/grapesjs-lory-slider.min.js?0.1.5"></script> |
|
|
<script src="js/grapesjs-tabs.min.js?0.1.1"></script> |
|
|
<script src="js/grapesjs-tabs.min.js?0.1.1"></script> |
|
|
@ -26,6 +27,7 @@ |
|
|
<script src="js/grapesjs-tooltip.min.js?0.1.1"></script> |
|
|
<script src="js/grapesjs-tooltip.min.js?0.1.1"></script> |
|
|
<script src="js/grapesjs-tui-image-editor.min.js?0.1.2"></script> |
|
|
<script src="js/grapesjs-tui-image-editor.min.js?0.1.2"></script> |
|
|
<script src="js/grapesjs-typed.min.js?1.0.5"></script> |
|
|
<script src="js/grapesjs-typed.min.js?1.0.5"></script> |
|
|
|
|
|
<script src="js/grapesjs-style-bg.min.js?1.0.1"></script> |
|
|
|
|
|
|
|
|
<style type="text/css"> |
|
|
<style type="text/css"> |
|
|
.icon-add-comp::before, .icon-comp100::before,.icon-comp50::before,.icon-comp30::before,.icon-rm::before{ content: '';} |
|
|
.icon-add-comp::before, .icon-comp100::before,.icon-comp50::before,.icon-comp30::before,.icon-rm::before{ content: '';} |
|
|
@ -134,6 +136,14 @@ |
|
|
min-height: 450px; |
|
|
min-height: 450px; |
|
|
margin-bottom: 8px; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
} |
|
|
|
|
|
.grp-handler-close { |
|
|
|
|
|
background-color: transparent; |
|
|
|
|
|
color: #ddd; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.grp-handler-cp-wrap { |
|
|
|
|
|
border-color: transparent; |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
</head> |
|
|
</head> |
|
|
<body> |
|
|
<body> |
|
|
@ -986,7 +996,6 @@ |
|
|
selectorManager: { componentFirst: true }, |
|
|
selectorManager: { componentFirst: true }, |
|
|
styleManager: { clearProperties: 1 }, |
|
|
styleManager: { clearProperties: 1 }, |
|
|
plugins: [ |
|
|
plugins: [ |
|
|
'gjs-preset-webpage', |
|
|
|
|
|
'grapesjs-lory-slider', |
|
|
'grapesjs-lory-slider', |
|
|
'grapesjs-tabs', |
|
|
'grapesjs-tabs', |
|
|
'grapesjs-custom-code', |
|
|
'grapesjs-custom-code', |
|
|
@ -995,6 +1004,8 @@ |
|
|
'grapesjs-tooltip', |
|
|
'grapesjs-tooltip', |
|
|
'grapesjs-tui-image-editor', |
|
|
'grapesjs-tui-image-editor', |
|
|
'grapesjs-typed', |
|
|
'grapesjs-typed', |
|
|
|
|
|
'grapesjs-style-bg', |
|
|
|
|
|
'gjs-preset-webpage', |
|
|
], |
|
|
], |
|
|
pluginsOpts: { |
|
|
pluginsOpts: { |
|
|
'grapesjs-lory-slider': { |
|
|
'grapesjs-lory-slider': { |
|
|
@ -1113,7 +1124,7 @@ |
|
|
},{ |
|
|
},{ |
|
|
name: 'Decorations', |
|
|
name: 'Decorations', |
|
|
open: false, |
|
|
open: false, |
|
|
buildProps: ['opacity', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'], |
|
|
buildProps: ['opacity', 'border-radius', 'border', 'box-shadow', 'background-bg'], |
|
|
properties: [{ |
|
|
properties: [{ |
|
|
type: 'slider', |
|
|
type: 'slider', |
|
|
property: 'opacity', |
|
|
property: 'opacity', |
|
|
@ -1140,14 +1151,9 @@ |
|
|
{ name: 'Shadow type', property: 'box-shadow-type'} |
|
|
{ name: 'Shadow type', property: 'box-shadow-type'} |
|
|
], |
|
|
], |
|
|
},{ |
|
|
},{ |
|
|
|
|
|
id: 'background-bg', |
|
|
property: 'background', |
|
|
property: 'background', |
|
|
properties: [ |
|
|
type: 'bg', |
|
|
{ name: 'Image', property: 'background-image'}, |
|
|
|
|
|
{ name: 'Repeat', property: 'background-repeat'}, |
|
|
|
|
|
{ name: 'Position', property: 'background-position'}, |
|
|
|
|
|
{ name: 'Attachment', property: 'background-attachment'}, |
|
|
|
|
|
{ name: 'Size', property: 'background-size'} |
|
|
|
|
|
], |
|
|
|
|
|
},], |
|
|
},], |
|
|
},{ |
|
|
},{ |
|
|
name: 'Extra', |
|
|
name: 'Extra', |
|
|
@ -1325,9 +1331,20 @@ |
|
|
], |
|
|
], |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
editor.I18n.addMessages({ |
|
|
|
|
|
en: { |
|
|
|
|
|
styleManager: { |
|
|
|
|
|
properties: { |
|
|
|
|
|
'background-repeat': 'Repeat', |
|
|
|
|
|
'background-position': 'Position', |
|
|
|
|
|
'background-attachment': 'Attachment', |
|
|
|
|
|
'background-size': 'Size', |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
var pn = editor.Panels; |
|
|
var pn = editor.Panels; |
|
|
var modal = editor.Modal; |
|
|
var modal = editor.Modal; |
|
|
|