GrapesJS Issues

3,464 parsed GitHub issues β€” 370 solved Β· 90 open. Search, filter and explore battle-tested answers.

1,399 issues found

πŸ” outdated
#921Mar 2, 2018by dmmprog3 answers
1 reactions

Select and focus an html element from a panel button

Hi everyone, Is it possible to set focus in a section html with Grapes, like as an anchor? I have a panel button and it just select the section that I want but not focus to element. Here is the code: panel.addButton('options', [{ id: 'link', className: 'fa fa-th-list', command: function linkChap(e) { editor.DomCompone...

artf

If for focus you mean scrolling the view to the component, unfortunately, there is no such a method, but you can actually implement it by relying on editor.Canvas.getBody().scrollTop

Amir2828

Did you manage to make it work?

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.

#919Mar 2, 2018by AlessandroMagri2 answers
0 reactions

Reinit GrapesJS

Hi all, I'm writing an application that include grapesjs fron an ajax call in a specific div. Obviusly I'd use an external menu to navigate in the application. If I reopen the page that init the grapesjs firefox give me an error: "TypeError: this.frame.el.contentDocument is null". I hope I've explained myself. Is ther...

artf

Subscribe to #914 probably this will be fixed in the next release

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.

#918Mar 1, 2018by lorrandavid2 answers
0 reactions

How to change trait label?

After searching for a while, I couldn't find how to change only the trait label without overwriting everything. This is my attempt that didn't work out I saw people overwriting the entire module, is that the way it should be done?

artf

Currently, to change the trait's label you have to do it on the component level

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.

#917Mar 1, 2018by chthomos2 answers
0 reactions

Custom style properties per element

Is it possible to have custom style property UI per element. For example, consider that I want the font-size to be shown as textbox for text components and as a radio for a custom component of mine. The font-size property can be in the same sector. How can this be achieved?

artf

Yes, I've used the same trick for the flex grid. In your Style Manager configuration create a property in this way then in your custom component model require the property

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.

#916Mar 1, 2018by tommedema3 answers
1 reactions

Why do layers not have element tag name?

I'm playing around with grapes' internals because I would like to contribute in the future. Most of my interest is in making it worth with generic HTML sites, regardless of the style/structure of CSS and HTML used (including doctype, body support etc). I expected the layers hierarchy to represent the DOM tree. While t...

maxtacco

Btw, it looks like Layer Manager uses Component's https://github.com/artf/grapesjs/blob/49100b2f63411fb08d438d21a5f7ff9131773a75/src/dom_components/model/Component.js#L35 property when rendering tree node in https://github.com/artf/grapesj...

maxtacco

GrapesJS is component based. So, I think it displays component names instead of tag names in this case. I think adding tag names and/or customizing layers tree rendering would be a nice enhancement.

maxtacco

Actually, GrapesJS component may consist of multiple DOM elements, so it may not make sense to display tag names in this case because you style a component and not individual elements within it.

#914Feb 28, 2018by nojacko3 answers
3 reactions

Grapes cannot be reinitiated with new HTML

Calling init() on Grapes after changing HTML fails. This kinda situation happens on one page apps. I think a destory() function to gracefully reset Grapes is needed.https://jsfiddle.net/wdtrg1je/ (very bare bones simulation of a one page app)Click "Add Grapes" (loads Grapes with a some HTML)Click the "Link", change it...

nojacko

Looks like I'm not the only one who wants this πŸ˜‰ . Single page apps are where this has value (the issue I raise but also freeing up some memory). I'll look to raise a PR when I got something.

artf

As already mentioned here, currently, I don't see any value in starting such a feature (creating a good destroy method) but would really happy to see some PR :)

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.

#912Feb 28, 2018by nojacko3 answers
2 reactions

HTML attributes/traits not escaped

When double quotes are added to an attribute it breaks the HTML.https://jsfiddle.net/szLp8h4n/Drag in the link block.Click the link in the editorGo to "Component settings" panelEnter This is an "example" into title field.Click the view code icon.Invalid HTML is generated

artf

Thanks for the catch James PRs are welcome

artf

@nojacko I don't build files before the release so if you're using files from dist you're still using the old one

artf

Fixed by https://github.com/artf/grapesjs/pull/939

#911Feb 28, 2018by rajatkumcom3 answers
0 reactions

Could some one please help me with Custom Load.

What I can use instead of followings- editor.setHtml( arrdata['html'] ), editor.setCss( arrdata['css'] ), In below code.

rajatkumcom

Below is my code:- What I can use insted of followings- editor.setHtml( arrdata['html'] ), editor.setCss( arrdata['css'] ), Thanks in Advance.

artf

Just don't use them for loading your template data is all what you need

rajatkumcom

Thank you....

#910Feb 28, 2018by tommedema3 answers
1 reactions

Estimation of complexity to support existing html pages without predefined CSS structure?

I have a large amount of static websites, some which have been developed quite a while ago (using Bootstrap etc.) and some which have been developed more recently (using CSS grid etc.). Some use inline styles, some use class based styling, some style based on component hierarchy (#id > div > ul > li for example), some...

tommedema

@artf thanks, I see. I actually like that you rely on the browser's CSS parser because I am already noticing performance issues with large templates. If you also rely on something like postcss I fear that performance may further degrade. I...

artf

I believe that Grapes works solely with BEM-like CSS styling. I.e. each component has its own class. Is this correct? Is the "selector/class viewer" which is only able to let you edit styles of class-based selectors, like .class1 .class1.c...

tommedema

@artf Thanks for the answer! I think I may need to explain my use case more. It's not always realistic to expect someone importing a template to define what CSS comes from external libraries. The reason for this is that typically CSS is co...

#909Feb 28, 2018by konstantin550003 answers
0 reactions

Events are not fire on canvas drag and drop.

Hello to everybody. The issue is: Events, just are not fire, after dragging on (into) canvas. editor.on('canvas:dragover') editor.on('canvas:drop') editor.on('canvas:dragenter') editor.on('canvas:dragend') The code is just the demo code from repo, with adding this 4 events. Here is the code: var editor = grapesjs.init...

konstantin55000

Code is syntax. valid. Here is jsfiddle with code https://jsfiddle.net/s9b2k7vp/ Here is the demo: https://www.screencast.com/t/pWcpkM7QO

konstantin55000

Update. Events are firing, but just after block drops into canvas. I'm not sure if this an issue, because what about event canvas:dragend and canvas:dragover, if block does not drop into canvas, they just not fire at all. Here is the demo,...

konstantin55000

Much sorry. Event was not fire because of prvious version of grapes.js Thanks to everybody for attention.

Browse all topics