GrapesJS Issues

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

1,399 issues found

πŸ” outdated
#1898Mar 16, 2019by foolsopts2 answers
0 reactions

Some bug in grapedrop

Step to producedrag image-block to canvas and select background.drag icon to canvas.click on image-block and go to background style tab click on background and click image button.when modal shown click on any image (not double click) then close modal.Now look at the icon in canvas you cannot change it to another icon....

artf

You're right, weird issue, I'll check it later. I'm gonna close it as is part of the Grapedrop product and not the grapesjs core, btw thanks for the report

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.

#1897Mar 16, 2019by sandromattei3 answers
0 reactions

View vs code

Hello...and sorry for my english! First of all, congratulations for this fantastic framework. I'm trying to use GrapeJS to create my own wordpress editor and I have a doubt. If in my code I use a wordpress "shortcode", how can I preview this shortcode in grapeJS but leaving the html code unchanged? thanks a lot

artf

I don't know what kind of API WordPress allows you to use for shortcodes but if it's possible I'd render them and put inside the editor as blocks

sandromattei

sorry, maybe I explained myself wrongly. I would like to insert a shortcode in the code (eg [my shortcode param1 = value1 param2 = value2 /] and render an html output instead (eg <div class = "param1" id = "param2"> </div>)

artf

Well if you need to do that on runtime you should create a custom component which on render makes an async call to Wordpress to ask to render that shortcode (again, I know nothing about WP API so I'm not sure if it's possible)

#1896Mar 16, 2019by kaoz703 answers
2 reactions

Component from custom plugin is not recognized

OS: Windows 10 x64 Browser: Chrome 72.0.3626.121 x64 GrapesJS: v0.14.55 Hello, I have some custom components (bootstrap tabs) in a plugin, for some reason some of the components of the plugin are not being detected by GrapesJS when loading it from the container elements, and others via dragging and dropping into the e...

artf

As you see, its type is div... this is why it never reaches the other type... look why and where that type is declared

kaoz70

Alright, that was the issue! I thought that the 'div' type was a default one set by GrapesJS. Thanks for all the help!

artf

It might be that elHasClass method?!?

#1895Mar 15, 2019by simplecommerce3 answers
0 reactions

Drag component over canvas with script, script appended multiple times.

Hi, not sure if this is a bug or not. But I noticed a weird behavior, when I drag a block that has a component that contains a script function, it seems to append it into the canvas before its being dropped. And as you drop it, it appends another time, the script. If you never drop the block and just drag over and out...

simplecommerce

So I dug around and figured that it was the updateScript method in the canvasView that was being called every time a script property is found on a component, regardless if its still being dragged or not over the canvas. I did some patching...

simplecommerce

My previous solution did not work, so I had to scrap it, so I re-opened the issue.

artf

Hi @simplecommerce if you think it's a bug, please open an issue by FOLLOWING the template and create a reproducible live demo of the issue. It's really important because as we don't have a lot of free time we risk to waste a big part of i...

#1894Mar 14, 2019by jwilson-lyonscg2 answers
0 reactions

Custom Trait documentation example doesn't work

Specifically this: https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type First of all, the keyUp event references onChange when the function name is actually onChange. Next, even if you fix this, this.model.get('value') evaluates to a blank/null value whenever I make changes to it. The only way I can see...

jwilson-lyonscg

Nevermind. I was misunderstanding the syntax. I didn't realize that the onChange and the onValueChange are 2 different unrelated methods apparently. It's not clear to me what onChange does exactly.

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.

#1893Mar 14, 2019by trivago-vgarcia3 answers
1 reactions

Have to have all the blocks the same styles by definition

We are using blockManager, as you can see in the example posted to codesandbox, following the documentation related to custom render. The unexpected behavior for us is that each time a user edits the styles of a block, all blocks are updated with that style, because the style has been set to the class used in the bloc...

artf

First of all, your example/problem has nothing to do with the custom render in blocks (you'd use it to customize the UI of blocks not components in the canvas). A solution is to set that class private

trivago-vgarcia

@artf Thanks for the reply! Sorry, because the example wasn't clear. It happens on every case, I mean, even when they are defined in the default template, and not only when a new selector is added. So, using selector:add wont fix all the c...

artf

It happens on every case, I mean, even when they are defined in the default template, and not only when a new selector is added. So, using selector:add wont fix all the cases. selector:add is triggered even when a new class is added from p...

#1892Mar 14, 2019by sanjib002 answers
0 reactions

Flexbox column is not working correctly.

Hi @artf , We are using flexbox block. The problem is, when we are trying to resize the middle column it affects all other columns, like automatically reducing the width of left column. It should affect the right column only. To create this scenario please add three columns and try to resize the middle one (https://co...

artf

This is how the flexbox is supposed to work when you resize a middle column. What you're trying to achieve is a bit different and would require another kind of implementation, so I'd suggest to create your grid components

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.

#1891Mar 14, 2019by jwilson-lyonscg3 answers
0 reactions

Can't create new button component

I'm having a hard time creating a new component for a <button> element. What am I missing? Is something bugged out here? Works fine if I change it to an <input> element:

jwilson-lyonscg

Okay so after some more experimentation it appears my component structure is correct, but my button block was not working correctly. So the button block was like this: When dragging this block into the canvas, this did not get recognized a...

artf

I think the problem here is a misunderstanding of content key. When you declare a block The content is for the Component, like a string o like an object. The string version of the example above would be: But when you use content inside a C...

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.

#1890Mar 13, 2019by MACscr2 answers
0 reactions

Disable Drag Feature, Not Ability

I want to create my own dragging and placement abilities. I love grapesjs, but really want more control over how dragging elements work in the editor area. Is there a way to disable the built in method so that I can create my own? I know the designer mode is on the roadmap, but I need the feature now, so I am going to...

artf

Well, for the component itself, when you click on move icon, it runs the tlb-move command so you can actually overwrite it by adding a new one with the same ID, but unfortunately there is no easy way to change the drag behaviour of blocks....

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.

#1889Mar 13, 2019by Nagavijay-kolla2 answers
0 reactions

How to append a child component at required position/index

For example, I have a parent component and this parent component has 4 child components. Here with trait functionality, I want to move the 3rd child component to 1st position likewise. I am able to move a component from any position to last by removing it from the existing position using component.remove() and adding...

artf

Use at, as an index, in options, eg. component.append(comp, { at: 0 }) will place the comp as a first 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.

Browse all topics