Need help with grapesjs-preset-webpage?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

artf
150 Stars 169 Forks BSD 3-Clause "New" or "Revised" License 40 Commits 36 Opened issues

Description

GrapesJS Plugin Webpage Preset

Services available

!
?

Need anything else?

Contributors list

# 851
JavaScr...
HTML
website...
site-ge...
32 commits
# 47,160
TypeScr...
css-fra...
C
Telegra...
4 commits

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.