Grapesjs Plugin Toolbox

Tools for grapesjs

$3

html

$3

js
const editor = grapesjs.init({
	container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  plugins: ['grapesjs-plugin-toolbox'],
});

$3

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 whereas grid cells referes to the actual divs generated from the template 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 used *columns*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 grid *clear- remove grid cells *update - 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 | | |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:''},...] |

`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`html

Modern javascript`js 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

`sh $ git clone https://github.com/Ju99ernaut/grapesjs-plugin-toolbox.git $ cd grapesjs-plugin-toolbox`

Install dependencies

`sh $ npm i`

Build css

`sh $ npm run build:css`

Start the dev server

`sh $ npm start`

Build the source

`sh $ npm run build``

License

MIT