RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/Ju99ernaut/grapesjs-plugin-toolbox below:

GitHub - Ju99ernaut/grapesjs-plugin-toolbox: Tools for grapesjs

Tools for grapesjs

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

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

body, html {
  margin: 0;
  height: 100%;
}

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

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

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>'},...]

CDN
- https://unpkg.com/grapesjs-plugin-toolbox
NPM
- npm i grapesjs-plugin-toolbox
GIT
- git clone https://github.com/Ju99ernaut/grapesjs-plugin-toolbox.git

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 */ }),
  ],
});

Clone the repository

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

Install dependencies

Build css

Start the dev server

Build the source

MIT

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4