GrapesJS Preset Webpage
Summary
- 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
 
Options
| 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 |  
  
Download
$ npm i grapesjs-preset-webpage 
Usage
<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> 
Development
Clone the repository
$ git clone git@github.com:artf/grapesjs-preset-webpage.git && cd grapesjs-preset-webpage 
Install dependencies
$ npm i 
The plugin relies on GrapesJS via peerDependencies, so you have to install it manually (without adding it to package.json)
$ npm i grapesjs --no-save 
Start the dev server
$ npm start 
License
BSD 3-Clause