GrapesJS Issues

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

1,399 issues found

πŸ” outdated
#1153Jun 1, 2018by ssabrewolf2 answers
1 reactions

Create minimalist Panel left sidebar

Hi grapesjs Team Is it possible to create a quick access left panel sidebar with the most popular blocks(text,image,2column,etc), this way is always visible because selecting any component on canvas automatically hides the main right blocks panel, if so, how could the same drag n drop behaviour from original blocks co...

artf

Check this example https://codepen.io/artf/full/MQpZPj/

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.

#1152Jun 1, 2018by milapshah153 answers
3 reactions

Listen to any change in the canvas

Hello Folks, I have a requirement where I added a button which saves the configuration to the remote DB.Now I would like to listen to any change in the canvas to enable/disable the button.For example, If there is any change, enable the save button for user to save it.I have gone through available events but I found no...

IStirton10

Actually I think there is an event that could serve this purpose. Could you try defining your method callback on 'change:changesCount'? grapesjs\src\editor\model\Editor.js:64 this.on('change:changesCount', this.updateChanges, this);

IStirton10

I'm not sure if there's one exclusive event that listens for any changes to the canvas. Perhaps you could have your method run on all of the canvas events instead? https://github.com/artf/grapesjs/blob/dev/src/editor/index.js#L53## Canvas...

milapshah15

@IStirton10 Let me try it out.I guess this should work. Warm regards Milap

#1150May 31, 2018by afaraha84033 answers
1 reactions

Get Uploads as Base64

Hello All, I need help integrating this into a web app that I have. Everything renders and works as expected but I am trying to get the uploaded images (through drag and drop) as a base64. Using an endpoint is not an option I can use. This is the code that I have Also after I process my external upload function do I j...

artf

Have you tried with this?

afaraha8403

Yes I tried that. But what I am looking for it to get the base64 file so I can upload to the plateform I am using and then adding the return url to grapesjs

artf

Well then use uploadFile and if you don't know how to get the base64 of the file try to copy embedAsBase64

#1149May 31, 2018by ionic6662 answers
0 reactions

Change the content in <td>

hi ,bro.Now, tables can't change the content.How can I modify the content in td

artf

@ionic666 follow the issue template, please, I don't even understand the context of your question

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.

#1148May 31, 2018by dwengticorp2 answers
0 reactions

Script in component get messed up, any idea?

I created a component like const TWITTERTYPE = 'TWITTER'; domc.addType(TWITTERTYPE, { model: defaultModel.extend({ defaults: { ...defaultModel.prototype.defaults, droppable: false, account: 'OntarioAlliance', widgetwidth: 425, widgetheight: 525, traits: [ { label: 'Account', name: 'account', changeProp: 1, }, { label:...

artf

If you use any kind of minifier, the script is affected too. You can set the script as a string if you need to show the complete code to the user

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.

#1146May 30, 2018by sura2k3 answers
1 reactions

Adding traits to wrapper

I found a way to add traits to wrapper via init function, But I had to add other wrapper configs such as emovable, copyable, etc. Since wrapper is only a config element I hope this is the default behavior. However if there is a way to just add traits[] without other properties, how it could be done? Also I did followi...

artf

But I had to add other wrapper configs such as emovable, copyable, etc. Since wrapper is only a config element I hope this is the default behavior. However if there is a way to just add traits[] without other properties, how it could be do...

sura2k

I was using 0.14.5. It is working nicely with 0.14.15. Thanks for the tip and sorry to bother without testing it against latest version.

betacar

@sura2k How did you extracted the wrapper's trait values after they're set? /cc. @artf

#1145May 29, 2018by milapshah153 answers
0 reactions

Upload Images to Remote DB

Hello Everyone I was searching for the documentation where I can have user to select the image from its local and then the image should be stored in the SQL DB.Can you point me to the correct resources to achieve the same. How will I get base64 of the files which are selected Warm regards Milap

artf

All you need to know about the argument is here

milapshah15

@artf Thanks for closing this.I implemented the same and its working like a charm.

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.

#1144May 29, 2018by fernandoagarcia3 answers
0 reactions

Custom property to change multiple settings

Is there a way to extend a current property or create a new one to change multiple properties? I have a component in which I would like to change font-size and padding-left, padding-right etc within one property setting using a radio. But I noticed there is only one value set per option. Is there a way to change multi...

artf

Hi Fernando, you can find more about the Style Manager API here

fernandoagarcia

@artf My apologies. I meant to say that I would like to target width, padding-left, padding-right within one single property. Perhaps using a radio. I couldn't find an example of that in the docs. Was wondering if it was possible.

artf

Nope, style manager works per property. But you can create custom behaviors with Traits, in your case you can change the style

#1143May 29, 2018by ssabrewolf2 answers
1 reactions

How to enable progamatic placeholder block insert

Hello grapesjs Team I succesfully created a component with traits and a block to insert it, when i drag n drop the block there is a green line placeholder which works as guide helper for the user to insert components as seen here , this line helper only appears on block drag n drop operation, is it possible to trigger...

artf

No, unfortunately, there is no way to trigger d&d in that way, something similar you can do with a selected component in canvas via editor.runCommand('tlb-move') but not with 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.

#1142May 29, 2018by ionic6662 answers
0 reactions

How to update the model

hi ,now I'm implementing to change my table. i use this:this.selected.components('<table><tbody>'+tbodys+'</tbody></table>') but there has one more table and after saving ,the redundant table has changed its site.

artf

Obviously, if you add rows on init every time, you will get them any time you refresh the page

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