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