- Plugin name:
gjs-preset-webpage - Includes:
grapesjs-blocks-basicBasic set of blocksgrapesjs-navbarSimple navbar componentgrapesjs-component-countdownSimple countdown componentgrapesjs-plugin-formsSet of form components and blocksgrapesjs-aviaryAdd the Aviary Image Editorgrapesjs-plugin-filestackAdd Filestack uploader in Asset Managergrapesjs-plugin-exportExport GrapesJS templates in a zip archive
- Commands:
gjs-open-import-webpageOpens a modal for the importset-device-desktopSet desktop deviceset-device-tabletSetup tablet deviceset-device-mobileSetup mobile devicecanvas-clearClear all components and styles inside canvas
- Blocks:
link-blockquotetext-basic
| Option | Description | Default |
|---|---|---|
blocks |
Which blocks to add | ['link-block', 'quote', 'text-basic'] |
modalImportTitle |
Modal import title | 'Import' |
modalImportButton |
Modal import button text | 'Import' |
modalImportLabel |
Import description inside import modal | '' |
modalImportContent |
Default content to setup on import model open. Could also be a function with a dynamic content return (must be a string) eg. modalImportContent: editor => editor.getHtml() |
'' |
importViewerOptions |
Code viewer (eg. CodeMirror) options | {} |
textCleanCanvas |
Confirm text before cleaning the canvas | 'Are you sure to clean the canvas?' |
showStylesOnChange |
Show the Style Manager on component change | true |
textGeneral |
Text for General sector in Style Manager | 'General' |
textLayout |
Text for Layout sector in Style Manager | 'Layout' |
textTypography |
Text for Typography sector in Style Manager | 'Typography' |
textDecorations |
Text for Decorations sector in Style Manager | 'Decorations' |
textExtra |
Text for Extra sector in Style Manager | 'Extra' |
customStyleManager |
Use custom set of sectors for the Style Manager | [] |
blocksBasicOpts |
grapesjs-blocks-basic plugin options. By setting this option to false will avoid loading the plugin |
{} |
navbarOpts |
grapesjs-navbar plugin options. By setting this option to false will avoid loading the plugin |
{} |
countdownOpts |
grapesjs-component-countdown plugin options. By setting this option to false will avoid loading the plugin |
{} |
formsOpts |
grapesjs-plugin-forms plugin options. By setting this option to false will avoid loading the plugin |
{} |
exportOpts |
grapesjs-plugin-export plugin options. By setting this option to false will avoid loading the plugin |
{} |
aviaryOpts |
grapesjs-aviary plugin options. Aviary library should be included manually. By setting this option to false will avoid loading the plugin |
false |
filestackOpts |
grapesjs-plugin-filestack plugin options. Filestack library should be included manually. By setting this option to false will avoid loading the plugin |
false |
$ npm i grapesjs-preset-webpage<link href="path/to/grapes.min.css" rel="stylesheet"/>
<link href="path/to/grapesjs-preset-webpage.min.css" rel="stylesheet"/>
<script src="path/to/grapes.min.js"></script>
<script src="path/to/grapesjs-preset-webpage.min.js"></script>
<div id="gjs"></div>
<script type="text/javascript">
var editor = grapesjs.init({
container : '#gjs',
...
plugins: ['gjs-preset-webpage'],
pluginsOpts: {
'gjs-preset-webpage': {
// options
}
}
});
</script>Clone the repository
$ git clone [email protected]:artf/grapesjs-preset-webpage.git && cd grapesjs-preset-webpageInstall dependencies
$ npm iThe plugin relies on GrapesJS via peerDependencies, so you have to install it manually (without adding it to package.json)
$ npm i grapesjs --no-saveStart the dev server
$ npm startBSD 3-Clause