Version: 0.17.3 Are you able to reproduce the bug from the demo?[ ] Yes[X] No What is the expected behavior? Being able to override onStart, onEnd, and updateTarget in a component's model.default.scrollable, as detailed in the documentation. Describe the bug detailed I have created a component that extends ComponentIm...
GJSBlock
Thanks for reporting this, @anlumo. The issue with Scrollable onStart/onEnd/updateTarget not Overridable appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modi...
In that case, I suggest you access the document of the iframe and to append manually the inline script (to get the document use editor.Canvas.getDocument()) Originally posted by @artf in https://github.com/artf/grapesjs/issues/2012#issuecomment-496304498 Hey, @artf, I was going through the issue, #2012 and I have a do...
theSC0RP
I tried to update the inline script using the following steps:Get the document of the iframe: iframeDoc = editor.Canvas.getDocument()Get the innerHTML of the body of the document: iframeDocBodyHtml = iframeDoc.body.innerHTMLReplace the inn...
theSC0RP
I tried to add the select and hover events by running component-select command by writing editor.trigger('core:component-select') but that didn't help either and doing editor.runCommand('core:component-select') gives an error. Am I missing...
artf
Well, I think it won't be bad to add an easy way to force the rerender of the iframe (not a common case but for sure might be useful in some cases). Unfortunately, right now, you should try to use private methods and check if everything wo...
Hello everyone, i want to save data from canvas to redux store, and it works, but after reloading the page, storage load method , doesnt set my data to builder (canvas), i dont know whats wrong, let me know if someone has any solutions. Code example :
artf
Remove this one const resultKey = key.slice(4);. You're storing data with the prefix but then you're loading it without
GJSBlock
Thanks for reporting this, @vatte21. Great question about How to create a custom storage manager, it doesnt set saved data from canvas, after reloading the page. The recommended approach with StyleManager is to use the event-driven API. St...
WARNING READ and FOLLOW next 3 steps, then REMOVE them before posting the issueFollow CONTRIBUTING Guidelines https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.mdDo a quick SEARCH first, to see if someone else didn't open the same issueAll relative statements/questions have to be filled/answered, otherwise, th...
artf
Hi @chrisijoyah did you try using canvas:dragdata? Here an example of usage https://jsfiddle.net/artur_arseniev/87rcb24n/
chrisijoyah
Hi @chrisijoyah did you try using canvas:dragdata? Here an example of usage https://jsfiddle.net/artur_arseniev/87rcb24n/ Does this mean I can prevent the dropped model from being added to the Canvas. Ideally I want to carry out some check...
artf
Can I do something like result.content= '' Yeah, you should be able to do that with that trick. Can you tell me more about your use case, what kind of check are you trying to perform?
Is it possible to change 'checked' trait of checkbox component simple by clicking on component inside canvas?
artf
Yeah sure, the trait reads the value from the component model, so if you change the binded value, the trait should change
GJSBlock
Thanks for reporting this, @christosapos. Great question about Change checked trait of checkbox component with click inside component.. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS doc...
I'm trying to wrap up grapesjs with nuxtjs framework any solutions to this?
artf
I think it's just about creating a Vue component for GrapesJS and use it in some of your pages
GJSBlock
Thanks for reporting this, @pranay2210. Great question about How to use grapesjs with nuxtjs ?. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look...
Hello, I have a problem which is that when adding a video or an image to the canvas, it is not centered, but to the left. With the help of the panel I set the alignment but it does not center it either.
Ju99ernaut
Try placing it inside a container, you can probably centre it using something like flexbox.
GJSBlock
Thanks for reporting this, @FacuCarbon. Thanks for sharing your report about images and videos are not focused. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle) Your Gr...
I want to build my own stylemanager useing some UI framework like Element-UI to make a beauty UI quickly. But how can I bind the properties to a selected component? I didn't see any API like setProperties to an element... . Can you help how to do that, thank you very much!!!
RutujaBadbe
#2296 This might help you!
artf
I guess something like this should work, if you need to create the Style Manager from scratch
xinnai
@artf That is totally what I need! Thank you very much!
I am working to get grapejs to work with Vue.js and am having no luck, I am following the getting started however I am unable to get it to work properly. So far I have added it to the mounted() section and have gotten some buttons with blocks to show up and add in however I have had no luck getting the Panels and Butt...
uchoaaa
Take a look at this issue, maybe helps: https://github.com/artf/grapesjs/issues/275
artf
Hi @joshk132 honestly the code looks good, are you able to create a reproducible demo (on something like Codesandbox)?
joshk132
@artf I've gotten it working where the panels show up however it now doesn't display right. The solution I had to do was change to use the below code. Pretty much I had to have "editor" as a variable which I had removed in my initial code...
Hi! I have tried adding jquery in canvas as well as in index.html I am adding it in canvas like this- canvas = editor.Canvas; const script1 = document.createElement('script'); script1.src = 'https://code.jquery.com/jquery-3.6.0.min.js'; canvas.getDocument().head.appendChild(script1); and in html page I have added it a...
artf
Here you can see how to load dependencies properly https://grapesjs.com/docs/modules/Components-js.html#template-related
GJSBlock
Thanks for reporting this, @RutujaBadbe. The error ReferenceError: $ is not defined occurs when Canvas attempts to access properties before the component lifecycle is fully initialized. This is a common race condition in GrapesJS. Immediat...