GrapesJS Issues

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

1,399 issues found

🔍 outdated
#861Feb 12, 2018by hillelcoren3 answers
0 reactions

Help adding images to the canvas

I've followed the docs and have been able to upload images. When I drag an image block (using the newsletter preset) and select an image from the assets it adds a blank image to the canvas. I need to double click the image on the canvas and select the image again for it to show. Is there something I need to do to wire...

artf

... it adds a blank image to the canvas Can't reproduce it. Any live demo? Or at least a screencast/gif?

hillelcoren

I put together a basic sample and it works, it must be a problem with my code.

hillelcoren

Sorry to take up your time! If anyone else sees this problem in my case it was happening because I was using the canvas:drop event to adjust the HTML (to perform a mail merge). I've fixed it by checking if the user is dropping an image in...

#860Feb 12, 2018by vrudikov3 answers
0 reactions

Can't bootstrap GrapesJS + Material Design Lite integration

So i'm trying to bootstrap this integration and i think MDL framework doesn't run, because JS components are not initialized at all Here is the plunker I digged into the code of both GrapesJS and MDL and both seems work ok. I tried several ways of initializing MDL JS: canvas init, init script after GJS div content, bu...

artf

Hi @vrudikov JS seems to be loading correctly (and you can see that by other JS elements like dialog) but seems like MDL is not auto-initializing. I think you just have to find how to call its init method

vrudikov

For everyone who want to have Material + GrapesJS integration - just use material-components-web

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.

#859Feb 12, 2018by hibuno2 answers
2 reactions

Change canvas style

Hi there, I have some question about canvas style, in this case i have config like this. By default i use css with name builder-desktop.css for default canvas style. And then i want if i change Device Manager and choose mobile, i can change a canvas style to builder-mobile.css. Thank you very much

hibuno

Hi there, Forget it i solve this problem, just add event on change like this. Thank you

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.

#858Feb 12, 2018by poirin3 answers
2 reactions

How to extract html/css code in view code automatically?

I need the function to copy the html/css code in the view code component automatically. Is there a predefined function? or I must implement this directly?

hibuno

Hi @poirin , I have some solution, last week i have this problem too i try to save current HTML & CSS without manual copying. And below is my code . --- Add custom panel eg. left top button (save button). And then create save function Good...

artf

If you're talking about storing your templates int DB or any other remote endpoint you can setup the built-in RemoteStorage, take a look here #778

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.

#857Feb 11, 2018by webnoob3 answers
3 reactions

How do I add a custom font in the Typography | Font dropdown?

Hi, First off, this is what I've been looking for for a long time so thanks for your efforts. Next, I'd like to add a font in the Typography | Dropdown list. How do I go about adding one? Note: I've seen the posts where you suggest adding a new stylesheet but I want it to only apply as per the Typography options. I al...

IceCrystal0k

This is how i added new fonts to the style manager: Call this functions either after initialize, or on editor.on('load', ()=> { .... addFonts() ... }) if you use a preset like newsletter preset that alters the style manager after load. als...

artf

Hi @webnoob currently the only way to do so is to add it via the initialization object. Here is the snippet from the demo https://github.com/artf/grapesjs/blob/gh-pages/demo.html#L1045-L1062 As you see can see I don't specify any font fami...

webnoob

Thanks for this. Based on what you showed me above, I've used the StyleManager to add the extra font in, like so: I suppose using this method I would need to import the actual font via a stylesheet into the editor for it to actually work o...

#855Feb 9, 2018by kewilson3 answers
2 reactions

No spacing with new button in export window

I've implemented a new plugin that adds another button in the export window, it's working fine. However when the page displays there isn't a space between it and the existing "Export ZIP" button. How might I go about adding a space the grapesjs way? Is it just figuring out which html dom element properties to tweak? ....

ryandeba

Hi @kewilson, If I'm understanding your issue correctly, I bet setting the left margin instead of left padding would work a lot better...is this screenshot close to what you're trying to accomplish? If so, you could replace your button.sty...

ryandeba

Hi @kewilson, This is a bit difficult to work with without a live code example (like a jsfiddle demo), but I'm seeing a few issues:let buttons = editor.Modal.getElementsByTagName("button") || {};This is probably throwing an error since edi...

kewilson

ok so button.style.paddingLeft = "30px"; works but I've noticed that the border area where the buttons reside don't distinguish between the two .. i.e., no button border around each button's text. Because the Export ZIP button is not under...

#854Feb 9, 2018by chiqui3d3 answers
0 reactions

Table block

I don't see any basic blocks that you can create a table. Even if I do the block, it is impossible to edit the text. Block example with this option I can't modify the content of each td and they don't give me the options to duplicate columns or rows. @artf you plan to create a table block?

chiqui3d

enveloping the th text in a paragraph, works well. but as I said before you plan to add custom table options, for the borders and general table color.

ionic666

@chiqui3d hi,can you tell me how to deal with table-block

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.

#852Feb 9, 2018by JulyanoF2 answers
0 reactions

How to change <a> content in traits?

I'm re-declaring a link type like this: When my button (<a>) is created, it is creating like this: <a class="btn botao-roxo">Botão</a> I would like to know how can I change the content of this (Botão) in traits.

JulyanoF

Exactly what I was looking for: Define new Trait type

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.

#850Feb 8, 2018by austinbiggs3 answers
0 reactions

Component:Moved Event

What I'm trying to accomplish: I have a piece of code I need to run when a component is "dropped". I put "dropped" in quotes, because it needs to fire when the tlb-move ends. So as a user, if I click the Move icon in the toolbar, when I finishing moving the component I need my code to fire. I've tried quite a few even...

artf

Have you tried with Components-&-JS?

maxtacco

Having the same problem - I can't figure out an event on a component to listen for when move ends.

maxtacco

So, the only way I was able to make it reasonably work was to listen for the "selectedComponent" event that is fired in https://github.com/artf/grapesjs/blob/b62e032b06f45382849b59e6a3f32049f0a021fc/src/commands/index.js#L168 in my compone...

#849Feb 8, 2018by ajwootto3 answers
1 reactions

Ability to unload and destroy the editor instance or reload the config options?

In my use case, I'm trying to change the store and load URLs used by the remote storage manager dynamically. As far as I can tell, the editor does not pick up and use any changes to the config if I change them directly, ie. after the editor has already been initialized. To try and get around it, I was attempting to un...

maxtacco

You can access RemoteStorage and update urls at any time:

arthuralmeidap

@ajwootto , You can create a custom Remote Storage and inside it apply your custom saving/updating logic. Take a look on this link: https://github.com/artf/grapesjs/wiki/API-Storage-Manager

ajwootto

Both of those options would probably work, however something I forgot to mention is that in some cases, I want to re-initialize the editor with components and styles pre-specified (ie. passing them in the init) rather than loading them fro...

Browse all topics