Skip to content

Ju99ernaut/grapesjs-plugin-toolbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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