GrapesJS Issues

Search parsed GitHub issues, see highlighted answers, and open the original discussion when needed.

3464 issues found

#2187August 7, 2019by Chaitwo3 answers
3 reactions

How to change the title for Image component on Hover?

Hello @artf , How can I change the title for my image component when I hover on it? LIke the highlighted text on this image: Thanks!

zgover

Set the 'custom-name' attribute on the component.

artf

custom-name is deprecated, use name instead

Chaitwo

Thanks a ton @Zachary1748 and @artf for the help, it worked like a charm. I've updated the getName function and changed the name attribute for images. name = name == 'image' ? 'image (Double Click to upload Images)' : name;

#2186August 7, 2019by smik31 answer
1 reactions

Blockmanager not adding blocks with init config (Getting started guide)

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

smik3

Changing to a different CDN (unpkg instead of cdnjs) seems to have fixed the issue - I'm guessing that's an old version on cdnjs.

#2185August 7, 2019by vegadesign1 answer
1 reactions

SVG icons instead of PNG

Hello. There are some PNG icons in the application:flex-just-start.pngflex-al-end.pngflex-just-sp-bet.pngflex-dir-col.pngflex-just-sp-ar.pngflex-al-start.pngflex-dir-row.pngflex-just-end.pngflex-just-sp-cent.pngflex-dir-col-rev.pngflex-al-str.pngflex-al-center.pngflex-dir-row-rev.png I've created the same but in SVG f...

artf

Wow, thank you very much @vegadesign really appreciated. We actually use those only for the demo (gh-pages branch), here: https://github.com/artf/grapesjs/blob/be39c6baf55f4e644b6bc8bbdd71ead71723dd6b/demo.html#L53-L91 I'll try to replace...

#2184August 6, 2019by D33Funky3 answers
0 reactions

[QUESTION] Losing predefined media queries

Hi. I have a predefined json of a template which contains a set of html elements and styles which are parsed into the set of components upon grapesjs load. The css contains some of the default media query rules which I'd like to keep for the template. Commands editor.getHTML() and editor.getCSS() return correct values...

artf

Provide a reproducible demo, please

no-response[bot]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take ac...

abozhinov

I have the same problem. This is my issue -> https://github.com/artf/grapesjs/issues/2843

#2183August 6, 2019by sherngar1 answer
1 reactions

[QUESTION] Can i add my own attribute inside the BlockManager.add ?

editor.BlockManager.add('testBlock' + i, { label: 'Box' + i, attributes: { MyAttribute: 'hi'}, content: html }) Can i do something like that ? or i need to use standard html attributes? I tried, but didn't work Thank you.

artf

It works as expected https://jsfiddle.net/90y7wuo8/ Next time create a reproducible demo

#2182August 4, 2019by miky95853 answers
1 reactions

[QUESTION] Splitted Custom CSS

@artf hello, I've customized just a little bit your great grapes. Example: I've a background with repeat-x like here: But on custom CSS the result is splitted into repeat-x and repeat-y How I can avoid this? tnx

artf

This is due to your browser's CSS parser (here we explain what is happening). The only solution is to use a custom CSS parser. For now, we provide grapesjs-parser-postcss

pouyamiralayi

hi! when you specify repeat-x only, what result do you expect?

miky9585

If I change into CUSTOM CSS the two rows of background repeat erasing them and replacing with background-repeat: repeat-x, css composer change it for me replacing and splitting into these two lines. So I don't think that issue is on trait...

#2181August 4, 2019by pouyamiralayi3 answers
2 reactions

global functions/variables

Hello there! recently i noticed this issue. I think it would be beneficial to have this feature. in contrast to the suggested approach by @artf that uses canvas scripts as a way to inject globally, i think this is not functional for the main purpose that this feature is intended for. in my opinion the main use case fo...

artf

Sorry @pouyamiralayi but I believe you didn't get the total meaning of script property in Component (obviously you're not the only one, even if I try to explain this "script paradox" here) What is asked in #1691 it just DOESN'T MAKE SENSE...

pouyamiralayi

thanks for your kind answer @artf . after struggling with the idea i am reaching to the point that what you are saying is totally reasonable. that was very naive of me to bringing this matter up again sorry for that. the current workaround...

collindutter

@pouyamiralayi would you mind providing some more information on how you created a global event bus to send messages between global scripts and local ones? The editor embeds the grapesjs content in an iframe, so you can't use a global wind...

#2180August 2, 2019by timsim002 answers
0 reactions

[QUESTION] Why are certain elements restricted to the form tag?

I realize it's not a hard requirement and can be customized, but the main demo and some cloned apps carry this idea forward in restricting certain elements (input, textarea, etc) from being dropped anywhere but a form tag. Was this introduced to show that it can be done or is there something else I'm missing?

pouyamiralayi

once i had a use case that was working with a third party component library. in that library the input and form components was available, but the rendering logic was implemented in a way that if input was not placed in the form tag, styles...

artf

@timsim00 technically you're totally free to reset this logic. I've set this up just because in HTML and CSS world (no JS) having input without a form wrapper it doesn't make sense. So, for example, let's take the input component. In grape...

#2179August 2, 2019by afdallah2 answers
3 reactions

[QUESTION] Auto wrap every component drag into canvas with another component

I am trying to make sure every component drag into the canvas to be wrapped with a column component. To achieve that I use canvas event. First I disabled window event to prevent default html 5 drag and drop event to be fired. canvas:drop event Let's say that my column component is so simple, only a single div. canvas:...

afdallah

@pouyamiralayi I managed to solve the problem by making component as an object. Like so. Anyway thanks for trying to help.

pouyamiralayi

Hello there! the event you are looking for is this editor.on('block:drag:stop', function (element) { element.replaceWith({ tagName:'div', style:{'border': '1px solid red'}, components: [element] }) }) Notice here I am using a red bordered...

#2178August 1, 2019by jeffgipson3 answers
0 reactions

loading remote data

Im working on a project and having a hard time getting remote data. Code: storageManager: { id: 'gjs-', // Prefix identifier that will be used on parameters type: 'remote', // Type of the storage autosave: true, // Store data automatically autoload: true, // Autoload stored data on init stepsBeforeSave: 1, // If autos...

miky9585

I think you need to print your data->attributes. Here my printed data that works fine

jeffgipson

Thanks for the reply @miky9585 I tried this but not working

artf

@jeffgipson you're returning a completely wrong format from the server, please read carefully this part https://grapesjs.com/docs/modules/Storage.html#setup-the-server