Grapesjs Zoom Plugin

DEMO

HTML

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-zoom-plugin"></script>

<div id="gjs"></div>

JS

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

CSS

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

Summary

• Plugin name: grapesjs-zoom-plugin super simple plugin for canvas zoom in zoom out. this plugin works with the api of canvas of the grapesjs.

there are two buttons in the Panel to control the canvas if you want the keyboard shortcut then its shift - for zoom out and shift = for zoom in.

in any case you have issue with the keyboard shortcuts keys then please open a issue i am happy to help!

Download

• CDN
  • https://unpkg.com/grapesjs-zoom-plugin
• NPM
  • npm i grapesjs-zoom-plugin
• GIT
  • git clone https://github.com/gxnanshu/grapesjs-zoom-plugin.git

Usage

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-zoom-plugin.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container: '#gjs',
      // ...
      plugins: ['grapesjs-zoom-plugin'],
      pluginsOpts: {
        'grapesjs-zoom-plugin': { /* options */ }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-zoom-plugin';
import 'grapesjs/dist/css/grapes.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/gxnanshu/grapesjs-zoom-plugin.git
$ cd grapesjs-zoom-plugin

Install dependencies

$ npm i

Start the dev server

$ npm start

Build the source

$ npm run build

License

MIT