Grapesjs Plugin Toolbox

Tools for grapesjs

DEMO

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