Tools for grapesjs
<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>
const editor = grapesjs.init({
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: false,
plugins: ['grapesjs-plugin-toolbox'],
});
body, html {
margin: 0;
height: 100%;
}
Tool in this plugin are
Plugin name: grapesjs-plugin-toolbox
Components
css-grid
grid-cell
Blocks
css-grid
Commands
add-palette
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.
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 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>'},...] |
https://unpkg.com/grapesjs-plugin-toolbox
npm i grapesjs-plugin-toolbox
git clone https://github.com/Ju99ernaut/grapesjs-plugin-toolbox.git
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="https://github.com/Ju99ernaut/grapesjs-plugin-toolbox/raw/master/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 */ }),
],
});
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
MIT