GrapesJS Issues

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

569 issues found

๐Ÿ” canvas
#2290September 25, 2019by JCKodel1 answer
0 reactions

[FeatureRequest] New trait type: component relationship

I have a custom component that will render the results of a remote query inside a component, so, I added a text trait on my block manager so the user can select the query selector for the destination component. It would be nice if there were a trait called "componentRelationship" that renders a target button. When we...

artf

Thanks @JCKodel for the suggestion, I like it but I also think it might a bit overwhelmed for being placed in the core library. Probable in this case it would be best to define a custom Trait

#2289September 25, 2019by JCKodel3 answers
3 reactions

[FeatureRequest] Allow to import javascript modules

When using Ionic StencilJS, the components are imported using the new module support: On {canvas: scripts: []} I can only load external scripts by their url. To cover such case, we could import modules as this: The final result inside canvas would be: Notice that this would cover also the case when we want to use inte...

artf

Nice I like it, for anyone interested in making a PR the code to update is here: https://github.com/artf/grapesjs/blob/aee18dcf0602e5d56e7670deb8d4ffbf31c73008/src/canvas/view/CanvasView.js#L140-L161

devtechk

Hi can I start from yours code to init grapesjs not in the html file but in a separated js file? Thank you

rywilson28

@artf it looks like this feature has been implemented. There is a minor issue where type will default to 'text/javascript'. For HTML 5 it should be omitted but should not cause any issues if there. Should this issue be closed?

#2279September 19, 2019by brentonkelly19821 answer
6 reactions

[QUESTION]: How to update the model for a custom component when a trait is changed.

Hi! I have read and re-read the GrapesJS Docs and API Reference on how to create a custom component and I just can't seem to figure it out. I initially started trying to extend the existing video component but then decided to make my own custom video component. I'm using the existing video component as a guide. My com...

brentonkelly1982

I have finally figured this out on my own and want to share the result for anyone else that is struggling with this the way I did. This code snipped creates a custom, responsive video component that supports YouTube, Vimeo, MyVRSpot, and a...

#2276September 18, 2019by iamriel2 answers
0 reactions

[BUG] `change:style` listener is not triggered

Are you using the latest release (older versions are NOT supported)? version 0.15.8What is the expected behavior? change:style listener should be triggered when changing/updating styleWhat happens instead? nothing happensIf you're able to reproduce the bug indicate all the necessary stepsDrag the text block to the can...

iamriel

Nevermind, I just disabled avoidInlineStyle: 0 :)

VanShane

Hi, is there any way to listen to component style updates (in model or view) without using avoidInlineStyle: 0.

#2275September 18, 2019by adriangroch3 answers
0 reactions

[BUG] Default styling not being applied when default panels are instantiated

It seems that when the default panels is altered in the config, the basic styles are stripped from the panels. For example the font and scrollbars.Are you using the latest release (older versions are NOT supported)? YesAre you facing the bug with your local copy of GrapesJS or with the current demo? BothWhat is the ex...

artf

Sorry @adriangroch but I don't really understand what do you expect. I see the panel and its styles correctly applied. Are you talking about the scroll outside the editor?? That has nothing to do with the editor and its styles...

adriangroch

@artf, when you have enough components on the canvas and then select the layer manager, the styles are not applied as they are in the default example - the font is different and the scrollbar has changed. It's all still within the editor

artf

That scrollbar is not from the editor but from the body and about the font, being a custom UI (when you use appendTo) the font is taken from the parent

#2272September 17, 2019by adriangroch1 answer
0 reactions

[BUG] `textable` component disappears with custom RTE

Are you using the latest release (older versions are NOT supported)? YesAre you facing the bug with your local copy of GrapesJS or with the current demo? Current demo & local, also using the CKEditor pluginWhat is the expected behavior? When a textable component, e.g. #481 Merge field is dragged into a text area (i.e....

artf

Hi @adriangroch thanks for the report but unfortunately it's not a bug, it's just not possible, currently, having components (textable in this case) inside a custom RTE. Each RTE has its own implementation and we can't ensure correct usage...

#2265September 12, 2019by raghuv91 answer
0 reactions

able to fetch my local html file using load url and getting status ok how can i load this fetched url into editor currently im getting blank screen inside editor

here is my code const LandingPage = { html: '', css: null, components: null, style: null, }; this.editor = grapesjs.init({ container: "#gjs", canvas: { styles: [], }, fromElement: true, components:'' , style: '', plugins: [], pluginsOpts: { "gjs-preset-webpage": {} }, storageManager: { type: 'remote', stepsBeforeSave:...

artf

@raghuv9 please, read carefully this guide https://grapesjs.com/docs/modules/Storage.html#setup-the-server You can't just request a document page, you HAVE TO CREATE a server-side script which outputs a JSON in a CORRECT FORMAT. And please...

#2264September 12, 2019by raghuv91 answer
0 reactions

how to load a remote url inside grapes js

this is how i tried to load my gitpage but its not working mounted() { const LandingPage = { html: '', css: null, components: null, style: null, }; this.editor = grapesjs.init({ container: "#gjs", canvas: { styles: [], }, fromElement: true, components:'' , style: '', plugins: [], pluginsOpts: { "gjs-preset-webpage": {...

jcarizza

Hello @raghuv9 first think that you cant make a request with AJAX because the CORS. Ypu need to grab the content in other way (maybe in the backend) and renderize in the editor with. editor.component(<your-content>).

#2262September 10, 2019by raghuv93 answers
0 reactions

blocked by cors policy No 'Access-Control-Allow-Origin' header is present on the requested resource

hello i'm using grapesjs with vue wrapper i'm unable to load a webpage using urlLoad: of grapesjs im facing cors issue,i'm pretty new to grapesjs please help me out Thanks in advance . here is my code --------------------------------------------------------------------------------------------------------- import grape...

pouyamiralayi

hi! you need a rule set like this: in your server security policy with origin set to what ever address you deploy your grapesjs client, default to localhost in above case.

pouyamiralayi

and in your storageManager configuration change the params entry like this: cheers.

raghuv9

and in your storageManager configuration change the params entry like this: cheers. hi still im facing the same issue here is my code i have included all the changes suggested by you please let me know where i'm doing wrong mounted() { con...

#2261September 10, 2019by raghuv93 answers
3 reactions

load local html file into grapesjs

hello i am pretty new to grapejs i want to load a local html file in the assets folder into grapesjs editor ,pls tellme how i can load local html file thanks in advance .. here is my code ---------------------------- import grapesjs from 'grapesjs'; import 'grapesjs/dist/css/grapes.min.css'; import 'grapesjs-preset-ne...

pouyamiralayi

hi! beside reading the content of the file that heavily depends on your environment, (if you are in a node environment you can use 'fs' module), you can use editor.setComponents('your html content'). more info here cheers.

nikolabtt

Browser (GrapesJS is executed in browser) should not be able to access arbitrary file from host machine file system. If that was allowed, you would be able to add some JS to a web page and be able to steal files from your users. If you wan...

raghuv9

hi! beside reading the content of the file that heavily depends on your environment, (if you are in a node environment you can use 'fs' module), you can use editor.setComponents('your html content').more info herecheers. No actually i'm tr...