GrapesJS Issues

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

829 issues found

๐Ÿ” question
#2061June 2, 2019by froderf3 answers
0 reactions

[QUESTION] How to place a component at the end of the canvas.

How can I put my footer at the end of the canvas? I want the editor to not allow placing a block/widget below the footer. example

artf

You can use something like this

froderf

@artf Do we have something like removeAdjacentHTML() editor.getWrapper().getEl().removeAdjacentHTML('afterEnd', footer); because when we used it keeps duplicating every after you reload the window. -------------- I'm looking for a way to s...

artf

Do we have something like removeAdjacentHTML() getEl() gives you the HTMLElement instance so insertAdjacentHTML is from DOM API, not GrapesJSit keeps duplicating every after you reload the window. ... can you create a reproducible demo?

#2056May 31, 2019by Bhavana201 answer
0 reactions

[QUESTION]: Custom Asset Manager Layout

Hi, We are trying to modify the Asset manager layout, to match our requirement below. Requirement:User double clicks on the image or adds a new image or any other option that opens the Asset manager, there should be a popup with the options: (Point1.png)Select from existing list from the server. (Point1AB.png)Select f...

artf

For such custom behaviour, I'd suggest replacing the built-in Asset Manager panel with your own

#2055May 31, 2019by zhangyanwei3 answers
5 reactions

[QUESTION]: How to remove the components correctly?

I want to remove the components programmatically, the following is my code snippet. After the components have been removed, then undo the delete actions (Ctrl + Z), do the multiple selections with the shift key will get the error Uncaught TypeError: Cannot read property 'indexOf' of undefined. My question is: How to r...

zhangyanwei

I've tried calling setSelected method before removing components, it works! Here is the updated code:

zhangyanwei

@joselin-bizmatesph I haven't been touching it for 3 years, but I guess it's similar to the case I had encountered. From the snapshot you posted, seems you removed the wrong components and you might need to double check the rowspan and the...

bizmatesph-joselin-macayanan

@zhangyanwei I encountered the same issue, I have some issues when I try to merge the cell from bottom to top. Have you already fixed the issue?

#2052May 31, 2019by tsuwunrut-carecloud1 answer
0 reactions

Merge Fields

I have a question regarding merge fields, similar to https://github.com/artf/grapesjs/issues/481. I'm trying to have my merge field icon button toggle a modal with an inputdropdown, then after selecting an option from the dropdown, have the merge field insert itself. ^ I have something along these lines. Clicking the...

artf

Generally, to prevent losing selection on element click you use event.preventDefault() so it might your case, but I'm not sure. Try at least to create a reproducible demo, BTW I close the issue as it has nothing to do with the core itself

#2051May 30, 2019by alikabeer322 answers
2 reactions

[QUESTION] Can I give default styling to an html tag like <p>?

I want that p tag should always have 0 margin. How do I do that? The reason is that ckeditor is wrapping the text around a p tag and p tag has a margin that's making it all ugly.

artf

You can pass all the styles you want to your initial template

alikabeer32

Exactly what I needed, Thanks!!

#2049May 30, 2019by benvmatheson3 answers
1 reactions

[Question]: Can the editor be instructed to ignore a class?

Once the editor creates HTML/CSS we hand it off to another piece of code. That piece of code relies on classes using a predetermined class name to perform actions on the HTML. (switching out placeholders for actual data etc.) If this class is added to an element, once that element is clicked, it attempts to add styles...

artf

You could place a listener on a new selector

artf

What do you mean "to ignore"? To ignore where? Being available in the style manager or something else?

benvmatheson

Sorry, I was unclear there. When clicking an element/block and proceeding to styling the element, the class is chosen by default. Could this class be deselected by default and hidden from the Classes field?

#2046May 29, 2019by sdrebel3 answers
1 reactions

[QUESTIONS] How to disable Scripts inside the editor?

Hi @artf , I need to disable all the scripts (component scripts and other scripts) inside the editor, and scripts should run only when we click on 'preview button'. Is there any method for it?

sdrebel

Hi @artf , Thank you for the reply. Right now i'm removing all the scripts and running only in preview mode.

artf

No, at the moment, there is no kind of public API to do that

mariasmol

Hi @sdrebel would love if you can share your solution. Also,after allowing scripts in the editor i copied this example to import pressed the import and saw the hello world. however when using the preview mode i don't see the alert . Do i n...

#2043May 28, 2019by megarg1 answer
0 reactions

[QUESTIONS] Adding custom component does not work

I have done a lot of research but still could not add a custom component. I tried the example in official docs (to modify behavior of "input" element and it is working fine). https://grapesjs.com/docs/modules/Components.html#define-new-component But the above example is for modifying existing component ("input"). I am...

artf

First of all, use the improved API. The isComponent is triggered only if you need to parse an HTML string, if you pass the component object (eg. { type: 'input2', }) the parsing is not necessary. You don't see anything in the canvas becaus...

#2041May 28, 2019by EthanM111221 answer
0 reactions

[Question/Feature Request] Licence info is missing?

Hi, While reading the licencing requirements for this project and also grapesjs-preset-newsletter project the licence states that the disclaimer must be referenced/included in the output source/binary files. To meet this need should the source js not include a reference similar to this example, or have I misinterprete...

artf

While reading the licencing requirements for this project and also grapesjs-preset-newsletter project the licence states that the disclaimer must be referenced/included in the output source/binary files. I think that sentence might be a su...

#2039May 27, 2019by faaizalikhan13 answers
0 reactions

[QUESTIONS] How can I update the styles of a class?

Hi, so I have this button, whose style changes when hovered, a new class is added: <button class="btn btnhovered">Button 1</button> <button class="btn">Button 2</button> Is there a way I can change the styles of a particular class? If I wanted to add a custom color to the "btnhovered" class? Any help appreciated, than...

artf

To get the rule with that class use CssComposer.getRule and once you have the rule update its style

faaizalikhan1

@artf Hi, I am trying to access with that statement, but I get null as a response, what could be the issue?

artf

Well, the rule should be there at first. If you're using canvas.styles option in your init method those are not appended inside CssComposer, so you have to add it first.