grapesjs/preset-webpage

GrapesJS Plugin Webpage Preset

GrapesJS

GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates. To better understand this concept check the image below

Generally any 'template system', that you'd find in various applications like CMS, is composed by the structure (HTML), style (CSS) and variables, which are then replaced with other templates and contents on server-side and rendered on client.

This demos show examples of what is possible to achieve:
Webpage Demo - http://grapesjs.com/demo.html
Newsletter Demo - http://grapesjs.com/demo-newsletter-editor.html

Table of contents

• Features
• Download
• Usage
• Development
• Documentation
• API
• Testing
• Plugins
• Support
• Changelog
• Contributing
• License

Features

Blocks	Style Manager	Layer Manager

Code Viewer	Asset Manager

• Local and remote storage

• Default built-in commands (basically for creating and managing different components)

Download

• CDNs
  • UNPKG (resolves to the latest version)
    • https://unpkg.com/grapesjs
    • https://unpkg.com/grapesjs/dist/css/grapes.min.css
  • CDNJS (replace X.X.X with the current version)
    • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/grapes.min.js
    • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/css/grapes.min.css
• NPM
  • npm i grapesjs
• GIT
  • git clone https://github.com/GrapesJS/grapesjs.git

For the development purpose you should follow instructions below.

Usage

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

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

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      components: '<div class="txt-red">Hello world!</div>',
      style: '.txt-red{color: red}',
  });
</script>

For a more practical example I'd suggest looking up the code inside this demo: http://grapesjs.com/demo.html

Development

Clone the repository and install all the necessary dependencies (yarn is highly recommended)

$ git clone https://github.com/GrapesJS/grapesjs.git
$ cd grapesjs
$ yarn

Start the dev server

$ yarn start

Once the development server is started you should be able to reach the demo page (eg. http://localhost:8080)

Documentation

Check the getting started guide here: Documentation

API

API References could be found here: API-Reference

Testing

$ yarn test

Plugins

Official Plugins | Community Plugins

Wrappers

• @grapesjs/react - GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.

Extensions

• grapesjs-plugin-export - Export GrapesJS templates in a zip archive
• grapesjs-plugin-filestack - Add Filestack uploader in Asset Manager
• grapesjs-plugin-ckeditor - Replaces the built-in RTE with CKEditor
• grapesjs-tui-image-editor - GrapesJS TOAST UI Image Editor
• grapesjs-blocks-basic - Basic set of blocks
• grapesjs-plugin-forms - Set of form components and blocks
• grapesjs-navbar - Simple navbar component
• grapesjs-component-countdown - Simple countdown component
• grapesjs-style-gradient - Add gradient type input to the Style Manager
• grapesjs-style-filter - Add filter type input to the Style Manager
• grapesjs-style-bg - Full-stack background style property type, with the possibility to add images, colors, and gradients
• grapesjs-blocks-flexbox - Add the flexbox block
• grapesjs-lory-slider - Slider component by using lory
• grapesjs-tabs - Simple tabs component
• grapesjs-tooltip - Simple, CSS only, tooltip component for GrapesJS
• grapesjs-custom-code - Embed custom code
• grapesjs-touch - Enable touch support
• grapesjs-indexeddb - Storage wrapper for IndexedDB
• grapesjs-firestore - Storage wrapper for Cloud Firestore
• grapesjs-parser-postcss - Custom CSS parser for GrapesJS by using PostCSS
• grapesjs-typed - Typed component made by wrapping Typed.js library
• grapesjs-ui-suggest-classes - Enable auto-complete of classes in the SelectorManager UI
• grapesjs-fonts - Custom Fonts plugin, adds a UI to manage fonts in websites
• grapesjs-symbols - Symbols plugin to reuse elements in a website and accross pages
• grapesjs-click - Grab and drop blocks and components with click (no more drag-and-drop)
• grapesjs-float - Anchor a floating element next to another element (selected component, ...)

Presets

• grapesjs-preset-webpage - Webpage Builder
• grapesjs-preset-newsletter - Newsletter Builder
• grapesjs-mjml - Newsletter Builder with MJML components

Find out more about plugins here: Creating plugins

Support

If you like the project and you wish to see it grow, please consider supporting us with a donation of your choice or become a backer/sponsor via Open Collective

Thanks to BrowserStack for providing us browser testing services

License

BSD 3-clause

preset-webpage's Issues

Body Element is missing class="gjs-dashed"

Dashed outlines are missing

Background color doesn't effectively change when removing value

When removing a value from the background-color property and pressing enter , the color doesn't effectively get removed.

A workaround is to listen for changes to the background color property, and bind a transparent value to the model

this.editor.on('component:styleUpdate:background-color', (model) => {
        const updateToBg = this.editor.StyleManager.getProperty('background_&_border', 'background-color').attributes.value;
        let s = model.getStyle()

        if (!updateToBg) {
          model.setStyle({...s, 'background-color':'transparent'});
        }else{
          model.setStyle({...s, 'background-color':updateToBg})
        }
      });
    });

Not able to customize the Export Plugin options

Hi @artf,
I tried to customize the options in the grapesjs editor export plugin. But only two options(addExportBtn, btnLabel) works as expected. Other options such as filenamePfx, filename, root are not working as expected.

Source code? How best to customize?

I might be missing something.

I've gone through the GrapeJS starting docs (well done, btw) and now I want to get started with my own instance. I like the preset-webpage; but I need to do things like wipe out the blocks and add my own, custom blocks. Not really sure how to do that; should I be removing blocks with the Block Manager?

Alternatively, I was thinking I could just get hold of the plugin and make changes directly, but it's minimified. Is there a reason we can't get at the source JS/CSS for this plugin? Is it just not a good idea to customize the preset this way?

Andrew

Cannot read property 'level' of undefined

I am using grapesjs-preset-webpage in angular app and I am getting below error
ERROR TypeError: Cannot read property 'level' of undefined
at i (grapesjs-preset-newsletter.min.js:15)
at f (grapesjs-preset-newsletter.min.js:15)
at l (grapesjs-preset-newsletter.min.js:15)
at a (grapesjs-preset-newsletter.min.js:15)
at p (grapesjs-preset-newsletter.min.js:15)
at grapesjs-preset-newsletter.min.js:15
at Array.reduce ()
at c (grapesjs-preset-newsletter.min.js:15)
at Object.n [as stringify] (grapesjs-preset-newsletter.min.js:15)
at Object.e.getPreservedText (grapesjs-preset-newsletter.min.js:15)

I am initializing as below:
private initializeEditor(): any {
return grapesjs.init({
container: '#gjs',
storageManager: {type: null},
fromElement: 1,
plugins: ['gjs-preset-newsletter'],
pluginsOpts: {
'gjs-preset-newsletter': {
modalTitleImport: 'Import template',
// ... other options
}},
assetManager: {
uploadText: 'Add image through link or upload image',
modalTitle: 'Select Image',
openAssetsOnDrop: 1,
inputPlaceholder: 'http://url/to/the/image.jpg',
addBtnText: 'Add image',
uploadFile: (e) => {
const file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
},
handleAdd: (textFromInput) => {
this.editor.AssetManager.add(textFromInput);
}
}
});
}
Can Someone help me resolve this problem?

Duplicate StyleManager

I have been messing with this for days now...

Tried with several browsers, several servers (PHP, NodeJS and even a simple HTML file), but cannot seem to figure out why my Style Manager sections are duplicated.

Any help would be greatly appreciated!

index.html.txt

[QUESTIONS] How to add Categories

@artf How should I add categories (the drop downs on the side) to the template. I would like to add some custom blocks to a category, however, I am not clear on how to do this and what code I should put in what categories.

Any help would be much appreciated.

Kind Regards
Aiyush

Is it possible to use this plugin and grapesjs-plugin-ckeditor?

I'm using preset plugin but like to have grapesjs-plugin-ckeditor at the same time.

Would it be possible? (I am having an issue where it says the plugin is not found even if I installed ckeditor manually).

Sorry for silly question.
Thank you

[BUG] Classes repeated in @media query when column blocks are added

When one of the column blocks from grapesjs-blocks-basic plugin is drag-and-dropped in the demo the resulting CSS has same classes repeated multiple times inside @media query.

Can't clone repo

Permission denied (publickey).
fatal: Could not read from remote repository.

Webpage Preset not Working?

Image attached of the code.

I have followed the instructions on the repo from the "Usage" section and was hoping this would load properly from there? I do not get any of the background template at all though. All I get is the "Welcome" box that is hard coded in the HTML. Is there a different way to get the template to work properly? I do have the "grapesjs" directory available which is where I have put the js and css files.

platforma wireframes support?

Hi @artf, how can i add platforma collection of components and UI elements in this grapesJS any idea?

Why is aviary still included?

Why is aviary still included when its been dismissed according to the main repo readme and replaced with "grapesjs-tui-image-editor"?

Missing dependencies (when building with npm i)

Getting a 404 error when installing the project. The endpoint for the version of sass being downloaded no longer exists (version 4.8.3). I think this may be the latest build for windows users: https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-67_binding.node

Cloning with:

git clone https://github.com/artf/grapesjs-preset-webpage.git && cd grapesjs-preset-webpage

Installing with:

npm i

First few lines of the error:

> [email protected] install C:\Users\David\Documents\dev\grapesjs-preset-webpage\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.8.3/win32-x64-64_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.8.3/win32-x64-64_binding.node":

HTTP error 404 Not Found

Running on 64 Bit Windows 10 installation.

Development installation Can't resolve './OpenImport'

Hi,

Thank you for the development, I'm having an issue regarding installing the webpage preset. Here are the steps I'm following:

• git clone https://github.com/artf/grapesjs-preset-webpage.git
• cd grapesjs-preset-webpage
• npm i
• npm i grapesjs --no-save
• npm start

Here I get the following error:
ERROR in ./src/commands/index.js
Module not found: Error: Can't resolve './OpenImport' in '/./grapesjs-preset-webpage/src/commands'
@ ./src/commands/index.js 7:18-41
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src
Child html-webpack-plugin for "index.html":
Module not found: Error: Can't resolve './OpenImport'

Thank you

Julian

Issue: cannot add image

Cannot drop image into image asset.
Any help?
Sorry, solved adding
assetManager: {
embedAsBase64: 1,
assets: []
},
to grapjs.init

[BUG] Asset Manager delete asset button

Using the demo web preset template as a starting point, I noticed the remove asset button doesn't show up in the UI. Viewing source shows the button. It there some other setting that needs to be enabled for the remove button to be functioning?

<div class="gjs-am-close" data-toggle="asset-remove"> ⨯ </div>

Video Settings are not being display after changing the Source of video.

Referring to the official demo itself, https://grapesjs.com/demo.html,
After dropping the video and changing the source of video from the settings, all the setting are being fade away.

Need help with Custom Plugin and component

I'd like to create and add a couple of Custom Plugins and components to my Grapesjs install. Anyone here able to offer custom work?

ERROR TypeError: r is not a function while using in PROD

Hi! Thanks for the awesome package! It is very useful!

This is related to GrapesJS/grapesjs#2658

I am using grapejs with this preset in Angular 7, while i use in development (ng serve) it works fine. But once i build the project, i get this error in the console: ERROR TypeError: r is not a function. It is caused by this package, not by grapesjs itself.
I've traced down the error to the source code and it refers to this:

which refers to line 14 in the source code of src/commands/index.js:
https://github.com/artf/grapesjs-preset-webpage/blob/3e5a9e12998c9a32b6f1199953084163678e6c17/src/commands/index.js#L12-L16

In this context, r is openImport and as the error states, is not a function.
Keep in mind this happens only when i build in prod, so heres my config for angular:

"configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }

Thanks in advance!

Style sheets are not applied to any component in the container

I used create-react-app to create my project

The components in container don't contain any style.

I also tried to place the link and script tags inside the index.html, nothing solved

How to use it in React?

How can i use it in React? I tried a lot but i am not getting it.

I am using this Fiddle but https://jsfiddle.net/apaoa5o2/14/ it gives me error on getButton.

Can someone help me? I want the same clone in my react app.

Invalid Host header

I am getting Invalid Host header when I try to connect with app. I ran npm start without any problems. I use Apache reverse proxy as subdomain. How to fix it?

Cannot build the min js

I'm a bit lost.
I modify some parts of the app, then I run npm to get the min js file:

npm -i

I get several warnings about "peer of [email protected]", but no error, then I do

npm i grapesjs --no-save

But the file grapesjs-preset-webpage.min.js is not modified, no changes happened.
Where is my mistake?

Thanks,

Editor.js removal

When you clone this repo, it's still loading //feather.aviary.com/imaging/v3/editor.js.

GrapesJS/grapesjs#2133 on the grapejs repo it's not required anymore.

switching to style manager causes permanent (black) border on selecting elements

Using latest stable Grapes + Grapes preset webpage.

Steps to reproduce

1. go to https://jsfiddle.net/szLp8h4n/101/
2. select the text element
3. deselect the text element
4. notice the permanent black border appearing:

The expected behavior is that there is no black border when deselecting the element.

Note that this behavior is fixed by removing the logic that automatically opens the style manager when selecting a component:

Therefore there seems to be a bug when changing the active state of a view.

How to use only Import Command separate?

I need only the Import command, without the rest of the functionality of gjs-preset-webpage. But I can not do that. How to make? Because I'm using gjs-blocks-basic modified as needed

[bug] 2 Columns block not working properly

After I drag the 2 columns block on canvas, I am not able to change the relative width of first column. It behaves randomly as soon as click on the border of the first cell.

It works fine on the official web demo but does not work on this repo. What am I doing wrong?

StyleManager svgs not rendering properly

I've followed the getting started guide wich also shows the same error, and I've tried the grapejs-preset-webpage example. The svgs are bigger then what they are supposed to in the style manager tab
codepen

Import / Load html & css files

How to import css & html at once? Or load both at once.
Just created a some stuff, saved it and closed the csm. Now I cant reopen it correctly again :/

How to add plugins?

Hi, I'm new to this framework and was wondering how to add plugins (ie. slider) into the blocks manager? I've installed the slider. Do I need to import/load it at the index.js file?

// Update

I can load the slider plugin by adding
plugins: ['grapesjs-lory-slider'], pluginsOpts: { 'grapesjs-lory-slider': {} }

However others now missing. The question should be how to add slider/other new plugins to the Extra section?

Where is the CSS within this project?

On opening the example you can see the "Welcome to GrapeJS" box, the "welcome" to text has a welcome class. I can see that this is inherited from index.html put when I add a block it has a class e.g paragraph. Assigned to it, where does this come from?

I would like to include CSS within the canvas, however, when try this:

styles: [ 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css' ]

the canvas renders blank.

Kind Regards
Aiyush

Image resize option

Resize of image is not working in this plugin. How to enable this option? In Newsletter plugin is working. I want to use webpage plugin.

Thank you!

Panel colour template not changing

I changed the primary, secondary and tertiary colours in the _variables.scss file, but it does not reflect the change in my editor.

/* Class names prefixes */
$prefix: 'gjs-' !default;

/* Colors / Theme */
$primaryColor: #000000;
$secondaryColor: #ffffff;
$tertiaryColor: #804f7b;
$quaternaryColor: #d8d0d4;

format for all links created [help wanted]

hi,
i have:

grapesjs: 0.15.8
grapesjs-preset-newsletter: 0.2.20
ckeditor.js: 4
grapesjs-plugin-ckeditor - 0.0.9

i need that all links ( "A" tag ), automatically, has always same styles by default (css inlne), for example:

<a href="#" style="text-decoration:none; color:red!important!">one link </a>
how i can do it?

I'm trying this:

editor = grapesjs.init({
canvasCss: ' a{color:red!important;text-decoration: none!important;}', 

in canvas seems works fine when i insert the link, but when i get html+css inline with:

var html = $scope.editor.runCommand('gjs-get-inlined-html');
the CSS of links are not inline

any idea?

Hot apply plugin changes

Hi!

I need to make changes to several plugins at once. To achieve that I used the following commands:

git clone https://github.com/artf/grapesjs-preset-webpage
git clone https://github.com/artf/grapesjs-blocks-basic
git clone https://github.com/artf/grapesjs-navbar
cd grapesjs-preset-webpage
npm install
npm install grapesjs --no-save
npm link ../grapesjs-blocks-basic
npm link ../grapesjs-navbar
npm start

When I edit some files inside grapesjs-preset-webpage directory - the changes get applied after saving the file. When I edit a file inside, for example, grapesjs-blocks-basic - the changes aren't applied until I manually run npm run build inside grapesjs-blocks-basic. Is there a way to automatically rebuild code in this case?

Flex Container value and General -> Alignment -> Display are not in sync

The toggling of the Flex -> Flex Container value from "Disable" to "Enable", is not reflected in the General -> Alignment -> Display selection. This is visible in the Webpage preset demo.

Passive event listeners

The console tends to be full of warnings: [Violation] Added non-passive event listener to a scroll-blocking event. Consider marking event handler as 'passive' to make the page more responsive. See (50 of them)

A little research, its related to a new feature, something about dramatically improved scrolling performance by making assumptions on preventDefaults.

https://stackoverflow.com/questions/39152877/consider-marking-event-handler-as-passive-to-make-the-page-more-responsive
https://www.chromestatus.com/feature/5745543795965952

I think the fix would be to change all event listeners to have the added property (but may or may not need switch for older browsers, no idea; passive might need to be false I don't know): addEventListener(t, e, { passive: true} ).

Commands executing multiple times

Hello folks,

I need help.After adding grapejs-website-preset.js in my page, commands are executed twice on button click.

Can you please help.

Warm regards
Milap

Blockmanager not adding blocks on init

Hi,

Just trying to follow the 'Getting Started' guides but falling at one of the first hurdles, cannot seem to add in any blocks from the #add-blocks section.

I've created a fiddle here

Moving to main repository

modify and edit the Asset Manager

Where is the code to the asset manager which i can edit for my custom settings

setStyle is being overriden when editing the css

I have a preset template the html and css of which i apply via:

      editor.addComponents({
              type: 'text',
              content: template.html
          });

          editor.setStyle(template.style);

when I try to make changes to the preset styling disappears which might have something to do with the ids changing.
Am I doing something wrong?

Storage Manager: Remote

Using:
<script src="//unpkg.com/grapesjs/dist/grapes.min.js"></script>
The remote storage manager options does call the store endpoint, but it is passing neither form or url data.
While I am using ColdFusion to process this Store, a PHP example would be acceptable or is this a bug in: /*! grapesjs - 0.17.3 */

Thank you,

"Fullscreen" button does not work on Safari for Mac

When clicking the fullscreen button, the editor completely disappears if you are using Safari on MacOS.

Some things to note:

• The newsletter demo does not have this issue.
• This issue only appears to occur in Safari.
• The source of this issue appears to be initialization of the Panels in src/panels/index.js

pn.getPanels().reset(

The call above forces an additional render pass, which causes duplicate event handlers to get assigned to all of the buttons (not just the fullscreen button). The other major browsers don't seem to have an issue with requestFullScreen getting called on an element that is not in the DOM, however Safari blows up when this happens.

• If you "skip" the first execution of the "run" function in Fullscreen.js, you will notice that Safari behaves fine, leading me to assume that the issue is with attempting to put an element that is no longer in the DOM as a fullscreen element.

rgb border incomplete attribute bug

I think this is related with this closed issue

I have checked the current demo and the problem is still there.

To see the bug you only need to:

1. Select any element in the demo
2. Add 3px border width to it-> it's properties would be something like "3px" "rgb(255, 255, 255)"
3. Deselect the element and select it again.
4. Look again at the border color, it will be "rgb(255,"
5. Now the border property is broken for that element, try to remove the 3px width and add it again, it will not work.

The rgb sentence has missing elements, parenthesis, etc
This causes bigger problems when you export the CSS, since the stylesheet missing parenthesis will cause conflict with other attributes.

Here is a screencast showing you the issue in the current grapesjs demo:
https://screencast-o-matic.com/watch/cFf3DbbiN6

Form settings are not shown

I have installed this last update, and when I select any field of a form, in this case an input, it does not show me the input settings in Style Manager

Can I change the header texts under Blocks?

I know there is an option to change sub texts but is it possible to change those texts such as Basic, Extra and Forms?

Block ID location

Hi, I'm trying to remove some of the default basic blocks as part of my project. I have used the author's method of removing the block which is as follows

const bm = editor.BlockManager;
const blocks = bm.getAll();
const toRemove = blocks.filter(block => block.get('category') === 'Basic');
toRemove.forEach(block => bm.remove(block.get('id')))

I need to find the ID of that particular block (here i'm trying to remove columns 3/7)
Is the above method correct? and where should I find the id?

Video disappears after setting height:auto

Visible on the demo itself, after setting height: auto; the video is no longer visible on the Canvas. Appears to be due to the fact that the style manager setting applies to the video element's parent instead of the video element.

Workaround:
video{height:inherit!important;}

Blocks properties can't be overriden

Hi!

The blocks defined at the file https://github.com/artf/grapesjs-preset-webpage/blob/master/src/blocks/index.js can't be overridden.

I need to change their categories and labels.

Thank you!