grapesjs-plugin-toolbox
grapesjs-plugin-toolbox copied to clipboard
Published
20 hours ago •
Ju99ernaut
Ju99ernaut
Tools for grapesjs
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-gridgrid-cell
-
Blocks
css-grid
-
Commands
add-palette
Grid Component
Here
template guidesreferes to the dotted lines and colored template areas whereasgrid cellsreferes 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 usedcolumnsrowscolumngaprowgaptoggle- 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
Ju99ernaut