GrapesJS Plugin Webpage Preset
Switch branches/tags
Clone or download
Latest commit 6306f45 Apr 15, 2018

README.md

GrapesJS Preset Webpage

Summary

  • Plugin name: gjs-preset-webpage
  • Includes:
    • grapesjs-blocks-basic Basic set of blocks
    • grapesjs-navbar Simple navbar component
    • grapesjs-component-countdown Simple countdown component
    • grapesjs-plugin-forms Set of form components and blocks
    • grapesjs-aviary Add the Aviary Image Editor
    • grapesjs-plugin-filestack Add Filestack uploader in Asset Manager
    • grapesjs-plugin-export Export GrapesJS templates in a zip archive
  • Commands:
    • gjs-open-import-webpage Opens a modal for the import
    • set-device-desktop Set desktop device
    • set-device-tablet Setup tablet device
    • set-device-mobile Setup mobile device
    • canvas-clear Clear all components and styles inside canvas
  • Blocks:
    • link-block
    • quote
    • text-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