GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → artf → Grapesjs Preset Webpage

artf / Grapesjs Preset Webpage

Licence: bsd-3-clause
GrapesJS Plugin Webpage Preset

Programming Languages

javascript
184084 projects - #8 most used programming language

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 [email protected]: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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].