0.1.13 • Published 3 years ago

@progressiveprogrammer/grapesjs-preset-webpage-edited v0.1.13

Weekly downloads
-
License
BSD-3-Clause
Repository
github
Last release
3 years ago

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

OptionDescriptionDefault
blocksWhich blocks to add['link-block', 'quote', 'text-basic']
modalImportTitleModal import title'Import'
modalImportButtonModal import button text'Import'
modalImportLabelImport description inside import modal''
modalImportContentDefault 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()''
importViewerOptionsCode viewer (eg. CodeMirror) options{}
textCleanCanvasConfirm text before cleaning the canvas'Are you sure to clean the canvas?'
showStylesOnChangeShow the Style Manager on component changetrue
textGeneralText for General sector in Style Manager'General'
textLayoutText for Layout sector in Style Manager'Layout'
textTypographyText for Typography sector in Style Manager'Typography'
textDecorationsText for Decorations sector in Style Manager'Decorations'
textExtraText for Extra sector in Style Manager'Extra'
customStyleManagerUse custom set of sectors for the Style Manager[]
blocksBasicOptsgrapesjs-blocks-basic plugin options. By setting this option to false will avoid loading the plugin{}
navbarOptsgrapesjs-navbar plugin options. By setting this option to false will avoid loading the plugin{}
countdownOptsgrapesjs-component-countdown plugin options. By setting this option to false will avoid loading the plugin{}
formsOptsgrapesjs-plugin-forms plugin options. By setting this option to false will avoid loading the plugin{}
exportOptsgrapesjs-plugin-export plugin options. By setting this option to false will avoid loading the plugin{}
aviaryOptsgrapesjs-aviary plugin options. Aviary library should be included manually. By setting this option to false will avoid loading the pluginfalse
filestackOptsgrapesjs-plugin-filestack plugin options. Filestack library should be included manually. By setting this option to false will avoid loading the pluginfalse

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