GrapesJS Issues

3,464 parsed GitHub issues โ€” 370 solved ยท 90 open. Search, filter and explore battle-tested answers.

569 issues found

๐Ÿ” canvas
#1510October 12, 2018by himanshubudhlakoti2 answers
0 reactions

How to add 2 columns at blockmanager in grapesjs

Hello I am new in grapejs and using grapejs with angular6 i have seen Demo of grapesjs on []( https://grapesjs.com/demo.html). i want to create 2 columns at blockmanager as mentioned on below snapshot marked by red color i want to add 2 columns at blockmanager and when i drop that column on canvas then it should be ap...

himanshubudhlakoti

Hello All, if anyone is able in solving my issue mentioned above please let me know its urgent.

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#1508October 12, 2018by ghost2 answers
0 reactions

[Question]: Refresh Canvas after changing gjs-html externally

Hi, I've been using GrapesJS with ReactJS (GrapesJS sits inside its own react component) and I'm having an issue uploading an image using my own react file-picker component. When I select an image from my filepicker react component, as its external to GrapesJS I manually update the gjs-html item in the local storage w...

ghost

Looks like I forgot about the DomComponents, after downloading and having a look through the src for grapesjs-newsletter, I was in the openImportCommand and noticed how the DomComponents were being updated. So I added the following into my...

cederron

Looks like I forgot about the DomComponents, after downloading and having a look through the src for grapesjs-newsletter, I was in the openImportCommand and noticed how the DomComponents were being updated. So I added the following into my...

#1497October 10, 2018by kuldeepcis1 answer
0 reactions

Inner element content change with pop-up

Hello @artf I've make pop-up for select custom link data with image. Now all the data reflected properly but when I try to change src than it's not working please let me know how to fix that. When input image URL in field 'Link Text(image URL)' than it should be update image in canvas. Please guide me. This is live De...

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#1474October 2, 2018by keithstric3 answers
1 reactions

[BUG] FontAwesome request fails with 404

This is for version 0.14.33. After initializing the canvas and selecting an element 3 network requests are generated to the following: https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.14.33/fonts/fontawesome-webfont.woff2?v=4.7.0https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.14.33/fonts/fontawesome-webfont.woff?v=...

artf

cdnjs doesn't store fontawesome in grapesjs (but grapesjs' CSS tries to load them). The solution proposed by @detectedstealth it's for the canvas CSS so it has nothing to do with this editor CSS issue So try to include fontawesome manually...

detectedstealth

@keithstric for me to get font awesome to work in the editor I needed to add: To the init({}). Have you tried that?

keithstric

Thank you for your response. So, gave that a go, I added: canvas: { styles: ['https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.14.33/fonts/fontawesome-webfont.woff2?v=4.7.0'] }, to my init options, but still get the same behavior. I tried...

#1473October 2, 2018by detectedstealth2 answers
1 reactions

[BUG] Canvas external CSS

Comments in canvas/config.js state the external styles are added to the head of the iframe however the code in view/CanvasView.js actually appends the CSS to the body of the iframe. Expect it to work how the external scripts do where they are appended to the head correctly.

artf

Should not cause any issue as being the first element inserted but for the sake of completeness we gonna move it inside the head element

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#1471October 1, 2018by alfaalex813 answers
2 reactions

[Question] Blockmanager and Image

Hi! I use this code to add a new block: blockManager.add("image", { label: 'Image', category: 'Basic', attributes: { class: "gjs-fonts gjs-f-image" }, content: { style: { color: "black" }, type: "image", activeOnRender: 1, }, }); How can add a custom class to the img tag when i drop into canvas? Thanks.

arthuralmeidap

@alfaalex81 For the content object, you can add a new index called classes. This index needs to be an array of classes, which will be applied to the new Image block; Final code:

alfaalex81

Awesome! I have another question for the same argument. I need to create a custom block with an image inside, for example: <div> <ul> <li> <div><a href="#link"><img src="" alt="Title Image" /></a></div> <a href="#link" >Title</a> </li> </u...

arthuralmeidap

This is not the current grapesjs's behavior. the AssetManager only opens if you dropping directly am img block. You must have to select the img block within your custom block and execute a code like that:

#1469September 27, 2018by Deepak8132 answers
0 reactions

Check canvas event

Hi @artf, Is there any common method where we can know something updated on canvas. We want to create a custom undo manager and also want to give auto save option if any change hapend in the canvas like style update, clone, delete, new element dragged in the canvas. Any help would be appreciated. Thank you

artf

Start from checking out available events https://grapesjs.com/docs/api/editor.html#available-events

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#1464September 27, 2018by sureshDurai1232 answers
0 reactions

Customizing the Component Position

First of all thank you guys for this awesome library, And I have one Clarification that is how do i customize the drop position example if i drag a text field into Canvas it will look like - (below reference image 1) And want to Customize the position of that text by simply Dragging it from left to right or right to l...

artf

The "Designer mode" is not yet available but planned in the Roadmap (#74)

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#1443September 19, 2018by sapien992 answers
0 reactions

Angularjs components as grapesjs components

Hey artf, first gratulations to this awesome project, i really enjoy using it. Second: this is NOT about running grapesjs within an angular project, its more the exact opposite: grapesjs already runs fine as a angular 6 component. What i want to do is to use other angular-components within the grapesjs canvas. On the...

artf

All custom scripts loaded via canvas.scripts are loaded BEFORE components, so if you try to mount on something obviously it doesn't work. Probably you need also make use of Component related scripts

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#1441September 19, 2018by ageir3 answers
0 reactions

Drag image to canvas doesn't show image

Running latest version (0.14.29) on local server. Using the example webpage preset. Ubuntu 18.04, Chromium 69. I got a problem dragging images to the canvas. I'm using a php backend. The image is uploaded and added to the assetmanager but the image doesn't show up in the canvas, only the missing file icon and the name...

JulyanoF

@ageir I did some different (for file upload): and and for list images:

artf

Because of your custom uploadFile (why not using just the original???), you're not calling the callback https://github.com/artf/grapesjs/blob/dev/src/asset_manager/view/FileUploader.js#L105

mathiasbc

HI @artf, I have the same issue, my configuration looks like this: This function works alright, I can actually upload images and they will show in the asset manager. For the image block I have: Which is directly copied from the newsletter...