grapesjs-preset-webpage

by artf

GrapesJS Plugin Webpage Preset

136 Stars 146 Forks Last release: over 1 year ago (v0.1.11) BSD 3-Clause "New" or "Revised" License 40 Commits 6 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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



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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.