GrapesJS Issues

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

3464 issues found

#2130July 11, 2019by antcto1 answer
1 reactions

How to create a new page and link it from menu?

How to create a new page and design the content of this page? Then, how to make a link to this page in menu?

artf

GrapesJS has no concept of pages, it's just one canvas, it's up to you handling them

View details
#2129July 11, 2019by nikitha123 answers
16 reactions

[Question] how to append a button inside default modal and catch it's click event

I want a form inside a modal (using the default modal ), on click of the submit button make an ajax call. I have created a new component which pops a modal on drag and drop. I am able to insert the form in the modal It looks like this : <img width="1001" alt="Screen Shot 2019-07-11 at 10 22 17 AM" src="https://user-im...

giorgiosjames

Doing away with the form and just using javascript to create/interface with the modal contents works well. modal.setContent() for appending the button and myButton.onclick = () => {} to catch its click event. Here's some example code:

artf

The point here is that content accepts HTML nodes (not only HTML strings) so you can have any HTMLElement with any attached event (forms with submits, buttons with clicks, etc.) so the approach proposed is totally valid (thanks @giorgiosja...

AkibDeraiya123

@giorgiosjames Thanks, man this(https://github.com/artf/grapesjs/issues/2129#issuecomment-510734779) is work like a charm in my case. Your answer save a lot of my time :)

View details
#2128July 11, 2019by leetuanIncepit2 answers
0 reactions

[QUESTIONS] How to add device manager mobile landscape?

Hi, Please help me add device manager mobile landscape with structure example: @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } Currently, i have device manager with structure: @media (max-width: 480px) { } Thanks

artf

Check the DeviceManager API For now, it's only possible to use a single condition (configurable via mainConfigObject.mediaCondition option, max-width is the default)

Ensaphelon

@artf Is there any reason why grapesjs still does not support this feature? It seems that it could be resolved just by removing mediaCondition option from the EditorConfig at all, and allowing to pass any media query for each device in the...

View details
#2127July 10, 2019by zyxnowell1 answer
0 reactions

[QUESTION] How to update content prop from trait event

Hello, I want to update the content property based on the changes from the trait I have this component added and notice I have a custom property chartType which is the one that I would be needing to update. Here is the Trait that I created: What I want to do is whenever the updated or doStuff event is called in the ca...

artf

First of all, move all the props from block to the component to have something like this: otherwise, you can face unexpected behaviorsWhat I want to do is whenever the updated or doStuff event is called in the canvas-options it will update...

View details
#2126July 10, 2019by ghost2 answers
0 reactions

GrapesJS Editor functionalities not working Properly IE browser.

WARNING 1) Maximize and Minimize button not working properly in IE Browser. 2) Not able to add bold, italic, underlined, strike and link to the text. 3) If adding freemarker string like <#if test> ${test} </#if> getting ="" and style="box-sizing: border-box; appended. we can see here: <#if test="" style="box-sizing: b...

artf

Which IE?

ghost

Which IE? IE 11.

View details
#2125July 9, 2019by zyxnowellNo answers
0 reactions

[QUESTION] How to have a dynamic properties in a custom block?

Hello, I am making a custom category using ChartJS which would be blocks of draggable charts. I currently have this code to have a static chart rendered in the canvas after dropping Now my problem is after dragging it I cannot update/edit the chart's data. How can I make it so that the data, options properties of the...

View details
#2124July 9, 2019by edward18931 answer
0 reactions

[QUESTIONS] get html component video

Why on the editor canvas, the video component has a div in parent tag (video), whereas when I get html(editor.getHtml()), the div doesn't existis it possible if I want to add 1 div as a parent again? (for stye css)

artf

Why on the editor canvas, the video component has a div in parent tag (video), whereas when I get html(editor.getHtml()), the div doesn't exist To make a component behave in a specific manner its view (what you see in canvas) can be comple...

View details
#2123July 9, 2019by lajby953 answers
2 reactions

[Question] Translating default component names (Body, Text, Row, etc.)?

I want to change the names of the default components that you can drag and drop onto the canvas, so that it shows different names in the layer manager and other places, mainly because of translation into other language. Examples: Body, Text, Row, Link, Image, etc. How would I do that?

giorgiosjames

It seems the display name for a component in the canvas and the layer manager is the block's type id, with the first letter upper-cased. From what I can tell, then only way to change this is to make a new type extending the old one, with a...

artf

You can update their names in this way. IMPORTANT: place the code in a plugin otherwise, you risk to the see updated names only with newly added components

lajby95

Thanks. This works nicely when adding new components, but say I load a preset html+css using editor.setComponents(html) and then start editing that later. The preset's HTML tags get the various component names (Text, Box, Image etc.) assig...

View details
#2122July 8, 2019by zyxnowell1 answer
1 reactions

[Question] Adding script to content with chart js

Hello I am trying to add a Graph JS block with this code but whenever I would drag the new block I would get an error: How do I add a script to a content to generate the chart? Also are third party scripts allowed in GrapesJS or are there properties that needs do be defined in initializing the editor? Thank you!

zyxnowell

I just figured it out, you just need to declare your custom JS in the init method and set allowSripts to true

View details