• Stars
    star
    246
  • Rank 164,726 (Top 4 %)
  • Language
    TypeScript
  • Created about 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

GrapesJS Plugin Webpage Preset

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/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 preset-webpage

Install it

$ npm i

Start the dev server

$ npm start

License

BSD 3-Clause

More Repositories

1

grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
TypeScript
17,231
star
2

grapesjs-mjml

Newsletter Builder with MJML components in GrapesJS
TypeScript
527
star
3

cimice

Experimental user session recorder http://artf.github.io/cimice/
JavaScript
328
star
4

grapesjs-preset-newsletter

GrapesJS preset configuration for the newsletter editor http://grapesjs.com
JavaScript
143
star
5

grapick

Easy configurable gradient picker, with no dependencies
JavaScript
107
star
6

ajaxable

Make your forms instantly ajaxable
JavaScript
94
star
7

grapesjs-plugin-ckeditor

This plugin replaces the default Rich Text Editor with the one from CKEditor
JavaScript
74
star
8

grapesjs-cli

GrapesJS CLI helper for the development
JavaScript
63
star
9

grapesjs-tui-image-editor

GrapesJS TOAST UI Image Editor
TypeScript
62
star
10

grapesjs-blocks-basic

Basic blocks for the GrapesJS editor
TypeScript
53
star
11

grapesjs-plugin-export

Export GrapesJS templates in a zip archive
TypeScript
53
star
12

grapesjs-plugin-forms

Set of form components and blocks for the GrapesJS editor
TypeScript
47
star
13

grapesjs-custom-code

GrapesJS component for the embed of custom code
TypeScript
45
star
14

grapesjs-firestore

Cloud Firestore storage wrapper for GrapesJS
TypeScript
30
star
15

grapesjs-plugin-boilerplate

[DEPRECATED use https://github.com/artf/grapesjs-cli] GrapesJS Plugin Boilerplate
JavaScript
29
star
16

grapesjs-blocks-flexbox

Add the flexbox block
JavaScript
29
star
17

grapesjs-tabs

Simple tabs component plugin for GrapesJS
JavaScript
27
star
18

grapesjs-aviary

Add the Aviary Image Editor in GrapesJS
JavaScript
26
star
19

grapesjs-navbar

Simple navbar component for the GrapesJS editor
TypeScript
24
star
20

codemirror-formatting

Codemirror formatting addon http://codemirror.net/2/demo/formatting.html
JavaScript
21
star
21

grapesjs-lory-slider

GrapesJS Slider Component by using lory
JavaScript
20
star
22

grapesjs-style-bg

Full-stack background style property type for GrapesJS, with the possibility to add images, colors, and gradients
TypeScript
20
star
23

grapesjs-parser-postcss

Custom CSS parser for GrapesJS by using PostCSS
JavaScript
18
star
24

grapesjs-tooltip

Simple, CSS only, tooltip component for GrapesJS
TypeScript
17
star
25

grapesjs-indexeddb

IndexedDB storage wrapper for GrapesJS
TypeScript
17
star
26

grapesjs-style-filter

Add filter type input to the Style Manager in GrapesJS
JavaScript
16
star
27

grapesjs-typed

GrapesJS Typed component made by wrapping Typed.js library
JavaScript
16
star
28

grapesjs-plugin-filestack

Enable Filestack uploader inside the Asset Manager
JavaScript
16
star
29

grapesjs-touch

Enable touch support in GrapesJS
JavaScript
14
star
30

grapesjs-component-countdown

Simple countdown component for the GrapesJS Editor
TypeScript
14
star
31

grapesjs-style-gradient

Add gradient input to the Style Manager in GrapesJS
TypeScript
11
star
32

EmojiBelt

A Chrome Extension which tries to enable emoji panel on inputs
JavaScript
4
star