GrapesJS Preset Webpage

Demo

From the v1.* we don't include other plugins in this one anymore, so if you need them, you have to include them manually in your project. If you want to replicate the editor from the demo, please check the source of the demo here

Summary

• Plugin name: grapesjs-preset-webpage
• Commands:
  • gjs-open-import-webpage Opens a modal for the import
  • set-device-desktop Set desktop device
  • set-device-tablet Setup tablet device
  • set-device-mobile Setup mobile device
  • canvas-clear Clear all components and styles inside canvas
• Blocks:
  • link-block
  • quote
  • text-basic

Options

Option	Description	Default
blocks	Which blocks to add	['link-block', 'quote', 'text-basic']
block	Add custom block options, based on block id	(blockId) => ({})
modalImportTitle	Modal import title	'Import'
modalImportButton	Modal import button text	'Import'
modalImportLabel	Import description inside import modal	''
modalImportContent	Default content to setup on import model open. Could also be a function with a dynamic content return (must be a string) eg. modalImportContent: editor => editor.getHtml()	''
importViewerOptions	Code viewer (eg. CodeMirror) options	{}
textCleanCanvas	Confirm text before cleaning the canvas	'Are you sure to clean the canvas?'
showStylesOnChange	Show the Style Manager on component change	true
useCustomTheme	Load custom preset theme	true

Download

• CDN
  • https://unpkg.com/grapesjs-preset-webpage
• NPM
  • npm i grapesjs-preset-webpage
• GIT
  • git clone https://github.com/artf/grapesjs-preset-webpage.git

Usage

Directly in the browser

1<link href="path/to/grapes.min.css" rel="stylesheet"/>
2<script src="path/to/grapes.min.js"></script>
3<script src="path/to/grapesjs-preset-webpage.min.js"></script>
4
5<div id="gjs"></div>
6
7<script type="text/javascript">
8  var editor = grapesjs.init({
9      container : '#gjs',
10      ...
11      plugins: ['grapesjs-preset-webpage'],
12      pluginsOpts: {
13        'grapesjs-preset-webpage': {
14          // options
15        }
16      }
17  });
18</script>

Modern javascript

1import grapesjs from 'grapesjs';
2import plugin from 'grapesjs-preset-webpage';
3
4const editor = grapesjs.init({
5  container : '#gjs',
6  // ...
7  plugins: [plugin],
8  pluginsOpts: {
9    [plugin]: { /* options */ }
10  }
11  // or
12  plugins: [
13    editor => plugin(editor, { /* options */ }),
14  ],
15});

Development

Clone the repository

1$ git clone https://github.com/artf/grapesjs-preset-webpage.git
2$ cd grapesjs-blocks-basic

Install it

1$ npm i

Start the dev server

1$ npm start

Build before the commit. This will also increase the patch level version of the package

1$ npm run build

License

BSD 3-Clause