README
Grapesjs Plugin Toolbox
Tools for grapesjs
HTML
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<link href="https://unpkg.com/grapesjs-plugin-toolbox/dist/grapesjs-plugin-toolbox.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-plugin-toolbox"></script>
<div id="gjs"></div>
JS
const editor = grapesjs.init({
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: false,
plugins: ['grapesjs-plugin-toolbox'],
});
CSS
body, html {
margin: 0;
height: 100%;
}
Summary
Tool in this plugin are
- Css grid layout tool
- Canvas resizer
- Palette from image generator
- Breadcrumbs
- Layer icon mapper
Plugin name:
grapesjs-plugin-toolbox
Components
css-grid
grid-cell
Blocks
css-grid
Commands
add-palette
Grid Component
Here
template guides
referes to the dotted lines and colored template areas whereasgrid cells
referes to the actual divs generated from thetemplate guide
.
If the grid component is not empty the update button will only update the css to avoid overwriting any content. Check here to see usage example.
- Traits
auto-fill
- generate grid automatically(disables guides)min
- min cell width in px if auto-fill is usedcolumns
rows
columngap
rowgap
toggle
- show/hide template guides if not auto-fill(same function as toolbar icon)reset
- reset colored template areas used to generate gridclear
- remove grid cellsupdate
- generates grid cells or updates css if grid component isn't empty
Options
| Option | Description | Default |
|-|-|-
| panels
| use plugin panels | false
|'
| traitsInSm
| move traits/settings to styles panel | true
|
| resizer
| include canvas resizer | true
|
| hideOnZoom
| hide resizer if zoom is not 100 | true
|
| breadcrumbs
| include breadcrumbs | true
|
| labelGrid
| label for grid block | Grid
|
| categoryGrid
| category for grid block | Basic
|
| gridBlock
| options to extend grid block | {}
|
| gridComponent
| options to extend grid component model | {}
|
| gridClass
| class for grid block | grid
|
| gridCellClass
| class for grid cell block | grid-cell
|
| cellItemClass
| class for cell item block | cell-item
|
| labelColors
| label for color palette modal | Image palette
|
| labelApply
| label for apply button | Add
|
| palleteIcon
| toolbar icon to open palette modal | <i class="fa fa-paint-brush"></i>
|
| onAdd
| custom logic when palette is added | 0
|
| refreshPalette
| color pickers to refresh color palettes | [{sector: 'typography',name: 'Color',property: 'color',type: 'color',defaults: 'black'},...]
|
| minScreenSize
| minimum value the screen can be resized | 250
|
| icons
| icons to map to components | [{type: 'default', icon:'<i class="fa fa-cube"></i>'},...]
|
Download
- CDN
https://unpkg.com/grapesjs-plugin-toolbox
- NPM
npm i grapesjs-plugin-toolbox
- GIT
git clone https://github.com/Ju99ernaut/grapesjs-plugin-toolbox.git
Usage
Directly in the browser
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/grapesjs-plugin-toolbox/dist/grapesjs-plugin-toolbox.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-plugin-toolbox.min.js"></script>
<div id="gjs"></div>
<script type="text/javascript">
var editor = grapesjs.init({
container: '#gjs',
// ...
plugins: ['grapesjs-plugin-toolbox'],
pluginsOpts: {
'grapesjs-plugin-toolbox': { /* options */ }
}
});
</script>
Modern javascript
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-plugin-toolbox';
import 'grapesjs/dist/css/grapes.min.css';
import 'grapesjs-plugin-toolbox/dist/grapesjs-plugin-toolbox.min.css';
const editor = grapesjs.init({
container : '#gjs',
// ...
plugins: [plugin],
pluginsOpts: {
[plugin]: { /* options */ }
}
// or
plugins: [
editor => plugin(editor, { /* options */ }),
],
});
Development
Clone the repository
$ git clone https://github.com/Ju99ernaut/grapesjs-plugin-toolbox.git
$ cd grapesjs-plugin-toolbox
Install dependencies
$ npm i
Build css
$ npm run build:css
Start the dev server
$ npm start
Build the source
$ npm run build
License
MIT