1.0.3 • Published 10 months ago

grapesjs-preset-webpage v1.0.3

Weekly downloads
5,014
License
BSD-3-Clause
Repository
github
Last release
10 months ago

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

OptionDescriptionDefault
blocksWhich blocks to add['link-block', 'quote', 'text-basic']
blockAdd custom block options, based on block id(blockId) => ({})
modalImportTitleModal import title'Import'
modalImportButtonModal import button text'Import'
modalImportLabelImport description inside import modal''
modalImportContentDefault 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()''
importViewerOptionsCode viewer (eg. CodeMirror) options{}
textCleanCanvasConfirm text before cleaning the canvas'Are you sure to clean the canvas?'
showStylesOnChangeShow the Style Manager on component changetrue
useCustomThemeLoad custom preset themetrue

Download

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

Usage

Directly in the browser

<link href="path/to/grapes.min.css" rel="stylesheet"/>
<script src="path/to/grapes.min.js"></script>
<script src="path/to/grapesjs-preset-webpage.min.js"></script>

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

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

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-preset-webpage';

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/GrapesJS/preset-webpage.git
$ cd grapesjs-blocks-basic

Install it

$ npm i

Start the dev server

$ npm start

License

BSD 3-Clause