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

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