#715January 5, 2018by suchithmahadi3 answers
Hello , As per the document , // Change background of the wrapper and set some attribute var wrapper = domComponents.getWrapper(); wrapper.set('style', {'background-color': 'red'}); wrapper.set('attributes', {'title': 'Hello!'}); Can we set a class to wrapper. Please let us know how to set a class to the root componen...
artf
Sure editor.DomComponents.getWrapper().addClass('wrapper')
suchithmahadi
@artf , Thanks for the reply. Can we do editor.DomComponents.getWrapper().addClass('wrapper') in the release 0.10.7 Thanks.
suchithmahadi
Sorry to bother you, Because when i tried in version 0.10.7 it is giving a error [Error] TypeError: wrapper.addClass is not a function. (In 'wrapper.addClass('wrapper')', 'wrapper.addClass' is undefined) Global Code (index.html:4474) And o...
#714January 5, 2018by michaellwatson2 answers
trying to do this gives the error this.sender.get is not a function grapesjs.min.js toggleSm Basically I want to open the style manager when clicking on an element. Any help or info appreciated, thanks
artf
Hi Michael, there is actually a kind of bug in 'open-sm' which doesn't allow calling the command with runCommand but the reason is that it was designed to be called just by its relative button, indeed I'd recommend doing this for your case
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.
#713January 5, 2018by austinbiggs2 answers
So the wording of this may seem confusing, but essentially I'm trying to use gjs-droppable="" the same way one would use gjs-draggable="". So if gjs-droppable="li.feature" was set on <ul>, then only items matching the selector could be dropped within the <ul>.
austinbiggs
This already works as detailed above, I just had an error in my code originally preventing it from working correctly!
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.
#711January 4, 2018by austinbiggs2 answers
I keep digging through code and the css, I can't seem to locate the CSS for the golden parent container, nor the green drop placeholder. I've tried searching the colors of these in the CSS/JS, but nothing. When viewing source, I don't see anything appended either... Does anyone know what ID/Class I can use to modify t...
austinbiggs
Found the class after digging through the HTML. .gjs-placeholder-int, .gjs-com-placeholder-int, .gjs-nv-placeholder-int {}
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.
#710January 4, 2018by austinbiggs3 answers
I'm working on modifying the handle from draggable elements, in addition to having a handle, I'd like the entire element to be draggable. Looking through the code, I would assume I would just need to attach the tlb-move command to a draggable element on select. The above code, on select, writes the selected component...
artf
Try with something like this
Jogai
I followed your suggestion, but I get an error: "Uncaught TypeError: Cannot read property 'type' of undefined" editor.on('component:selected', () => { const selected = editor.getSelected(); if (!selected || !selected.get('draggable')) retu...
Jogai
Thanks so much for the update! I'm still a bit struggling to implement it right. I made an example: https://codepen.io/anon/pen/vRoRBX The example is preventing the user from doing too much. Most of the elements are made non-draggable. The...
#709January 4, 2018by NicholasGati3 answers
Happy new year! I am having an issue with isComponent(). Here is my code: For some reason the only time the trait shows up in component settings is when I remove the if-statement completely from isComponent() and just return { type: 'selectReference' }. However, it becomes a trait of everything then. I have checked th...
artf
Hi Nicholas, are you defining selectReference inside a plugin?
NicholasGati
Hey Artur. Yes, it's inside of a plugin.
artf
Tried your code here https://jsfiddle.net/vv7sch2u/ and seems to work properly
#708January 4, 2018by HarshOB2 answers
When I try to save following html to grapes editor, its not able to render "template" tag. Regards
artf
Because this is how <template> tag works https://github.com/artf/grapesjs/issues/244
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.
#707January 4, 2018by suchithmahadi2 answers
Hello @artf , Came across a plugin which can be used in grapesjs for grid resizable and it is complete responsive have a look and please tell us how to integrate this plugin with GrapesJS, so that i can do a PR. https://github.com/gridstack/gridstack.js#demo-and-examples
artf
@suchithmahadi you're free to use it inside your project but it's not something we need inside the core of GrapesJS
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.
#705January 4, 2018by austinbiggs3 answers
Hello! I'm digging through code and I'm trying to achieve a placeholder effect while dragging the element? Something similar already exists for dragging blocks. If I want to add something to achieve this, what method would I need to modify/hook into? I don't see a startDrag option for elements on the canvas. similar t...
artf
Probably the reason of why I gave up 😂 As you see from here https://github.com/artf/grapesjs/blob/dev/src/commands/view/MoveComponent.js#L74 I tried using setDragHelper which copies the element's style from getComputedStyle but I also rem...
artf
Unfortunately, moving components is slightly different so I'm still working on this
artf
Actually, I was thinking about adding such a functionality but didn't go so far 😬 https://github.com/artf/grapesjs/blob/dev/src/commands/view/MoveComponent.js#L74
#704January 4, 2018by austinbiggs3 answers
I'm not sure if this already exists and I haven't seen it yet (apologies if that's the case). Is there a way to restrict where certain draggable elements are droppable? Say I have a list: And I want the user to be able to rearrange the list items, but restrict them from dragging outside of the <ul>. similar to http://...
austinbiggs
It seems you've thought of everything, you've done such an amazing job w/ GrapesJS! 😄
artf
Sure, you can make use of data-gjs-* attributes (eg. data-gjs-draggable="ul") Check the last example code here https://github.com/artf/grapesjs/wiki/Blocks