@serpstat/grapesjs-preset-webpage
v0.1.15
Published
Serpstat GrapesJS Plugin Webpage Preset
Downloads
1
Readme
GrapesJS Preset Webpage
Summary
- Plugin name:
gjs-preset-webpage
- Includes:
grapesjs-blocks-basic
Basic set of blocksgrapesjs-navbar
Simple navbar componentgrapesjs-component-countdown
Simple countdown componentgrapesjs-plugin-forms
Set of form components and blocksgrapesjs-aviary
Add the Aviary Image Editorgrapesjs-plugin-filestack
Add Filestack uploader in Asset Managergrapesjs-plugin-export
Export GrapesJS templates in a zip archive
- Commands:
gjs-open-import-webpage
Opens a modal for the importset-device-desktop
Set desktop deviceset-device-tablet
Setup tablet deviceset-device-mobile
Setup mobile devicecanvas-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