I have the same issue reported in Components & Js - Load Template #1906 Components with JS work fine when dropped, and on first export. However, if the page is refreshed, js is not loaded which causes issues. The JS is also excluded from any exports after a refresh. Thanks for the help.
GoodPHP
Hi, If you didn't find answer here, you can contact with Devfuture Team: https://devfuture.pro/contact/ We specialise on GrapesJS.
artf
Ensure to have the script on a defined Component and not Block, then you have to store and load the JSON structure, not HTML/CSS
Hi @artf , How would you recommend highlighting the components on the canvas that the selected block can be dropped into based on draggable & droppable rules? In other words, when a user starts dragging a block from the block manager I would like to highlight (add a border or inset box-shadow) the components on the ca...
artf
With the introduction of Canvas Spots I think this feature request can be considered done. Here is a quick demo example https://github.com/GrapesJS/grapesjs/assets/11614725/ea956282-b6bd-455e-af9b-6b5fb7707d71
artf
I think, currently, it's not easy to achieve it. The Sorter module is quite old and messy and I'd need to refactor it in order to allow such functionality (which, for sure, I'd be glad to have). Unfortunately, no ETA for such a thing :/
kerryj89
Was just thinking of this. I think it's the natural evolution and necessary when you can set limitations of where something is droppable.
Rendering Angular components in GrapesJS. I am creating an Angular editor with GrapesJS. I am able to integrate GrapesJS in my Angular project and I also created custom components and blocks that can be used to build tools. Is there a way to render Angular components directly into Grapes JS editor?
suryalijo
Thanks, I was able to render angular components in gjs by using createCustomElement.
suryavijayakumar1315
Add AngularComponent as entryComponents in the app module, then import createCustomElement like given below Now use "popup-element" in grapesjs
suryavijayakumar1315
I am using the custom element like this in Block Manager this.editor.BlockManager.add('blockname' , { label: 'label', type: 'type', content: <div><mycustomelement></mycustomelement></div> category: 'categoryname' });
There is no examples for components like extending image types , the docs seems a little bit difficult to understand and comprehend , if there is example for customizing an image type or the image uploader for a separate component then it would be nice, because we have I have a use case in my project.
artf
You extend the image as any other component, it's explained here. If you have a particular use case, it's up to you looking at the source of the component implementation
abulka
I am facing the same difficulty as @revdfdev - when following the documentation example to extend an existing component, I am struggling to comprehend. For example the documentation says: what does one put into the { ... }? This is never e...
artf
When you extend the default properties it works like that: If you need to have propB merged with the one from Component A, you would need something like that Interesting, in the above example, I get the attribute test without explicitly de...
Version: 0.16.22Are you able to reproduce the bug from the demo? [x] Yes [ ] NoWhat is the expected behavior? no errors in the console.Describe the bug detailed File involved is: https://github.com/artf/grapesjs/blob/6296bf8c970f700aa69e44728b7db80833452f69/src/dom_components/view/ComponentTextView.js#L61
artf
Weird (the view component can't exist without the model), are you able to provide exact steps to reproduce the issue?
no-response[bot]
This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take ac...
I want to generate a PDF Tool to have three main sections: HEADER, BODY and FOOTER. The three sections needs to be there always and I want to disable the possibility to allow the users to delete those sections. The rest of the components like images, text, columns, etc. needs to be editable like remove them if the use...
MartinPutz
By default all components are removable, so that's already covered. In terms of not allowing certain components to be removed, you can take a look at the component api:https://grapesjs.com/docs/api/component.html#component You would need t...
jesusdp
By default all components are removable, so that's already covered. In terms of not allowing certain components to be removed, you can take a look at the component api:https://grapesjs.com/docs/api/component.html#componentYou would need to...
Hi everybody, can somebody explain me please why when I create a new custom toolbar button this button shows only when I add a new component and not an existing one even this components are the same. I was thinking that might be something about the editor initiation that I'm not including. @artf What am I missing to m...
Ju99ernaut
Probably the editor doesn't change a component during runtime when it's model is changed, so the component on the canvas was created before the model was modified therefore it wont show the changes to the toolbar.
Ju99ernaut
I've gotten around this by loading the canvas after loading all components and component modifications, but I guess depending on storage setup running editor.load() might fix that.
RJCAM
Thanks for your response @Ju99ernaut, any ideas of how can I change them during runtime? I think It can work if I make those changes in the core but I was thinking in make some plugins with this type of functions and this way we can't make...
Hi all, I am wondering how to render the website with our own components designed by the editor into frontend? I cannot find any info about it in the documentation. I have tried several ways:directly load the html and css get from editor (It is not working as it does not contain any components info)use Canvas.getBody....
artf
I'd suggest reading this part https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates
Version: current Are you able to reproduce the bug from the demo? [X ] Yes [ ] No What is the expected behavior? The single textnode in any component (e.g. text, cell, ...) should be parsed as a textnode component. What is the current behavior? Currently, a single textnode in a component is parsed as only a content in...
Hi, creating a component/block, we want elements inside not to be removed, edited or moved: not removed and not edited ok but how to make them non movable? Thanks! $.get( "/iscrizionePrivacy.plp?a=VGsflaU2d7D0sUcDhl7lCkkX8tE1UW9kBzLcqcUAR8-yKo74nLUmyXKrfIUstkUirvlSCA5sqeHrBsznmUg&locale=itIT&fromBE=true", function( da...
artf
You can place another custom component in the middle which propagates those properties and also the draggable or, as the droppable is false on all components you can simply update all inner components on init
trony2020
Following code prints only "........ doTheThing 3......" Seems init() it's not called: $.get( "/iscrizionePrivacy.plp?a=VGsflaU2d7D0sUcDhl7lCkkX8tE1UW9kBzLcqcUAR8-yKo74nLUmyXKrfIUstkUirvlSCA5sqeHrBsznmUg&locale=itIT&fromBE=true", function(...