Hello, I am trying to create a new common trait shared among all components by creating the following plugin on another plugin file I am also creating a new component type same way following the docs, called extendedText which uses the text type as it's basis. While the text type has the handleBgColorChange() as shown...
ThetripGr
nvm , I revisited the docs more carefully, I somehow missed this about extending parent functions
GJSBlock
Thanks for reporting this, @ThetripGr. Great question about Creating a new component type does not inherit the functions of it's parent type. The recommended approach with Components is to use the event-driven API. Start here: Check the Gr...
Hello, what i am trying to achieve is to have the text component extended by assigning an extra trait named Alignment and deciding through the trait the kind of alignment i wish to do, after that no css should be applied but the appropriate class name should be given to the component. Is there an example of how i coul...
ThetripGr
So i got it working after some more tries, i will try to explain how i got it to work. When you define the trait you can declare a name. When you select option A from the dropdown selection you can track this change on init(), as this.on('...
artf
sry for the formatting but i do not know how to paste formatted code yet :P https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown
GJSBlock
Thanks for reporting this, @ThetripGr. Great question about Add class name from traits. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look f...
Hi, @artf. I was going through the getting started guide and the selector manager is placed below the style manager. How do I position the selector manager above the styles manager?
artf
As you can see from the example Both of them append the element inside the same container. You can simply create different containers
GJSBlock
Thanks for reporting this, @theSC0RP. Great question about Position of selector manager.. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look...
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
There is already a plugin for October CMS https://octobercms.com/plugin/pkurg-pagebuilder
GJSBlock
Thanks for reporting this, @michaelVictoriaDev. Great suggestion about FEAT: Is there a way or tutorial how we can integrate in october cms ?! While this specific feature isn't yet in the core API, there are several ways to achieve similar...
I really apologise if this has been covered previously. I have searched the issues and also read the documentation quite extensively and maybe I am not just understanding it correctly. I understand you can do run a script in the page builder to load the content however that content/html will be saved once I click save...
artf
I think you have to read this guide
anuragk15
Did you find the solution? I have a similar issue. For example, when I write blog and store them in my database. Now whenever someone visits my landing page(made with Grapesjs) I want them to see my latest blog there. Also, if some end-use...
GJSBlock
Thanks for reporting this, @webdevhayes. Great question about Loading dynamic content. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for th...
I am building a quiz builder plugin using grapesjs. I was wondering if we can add a component which is interactive and adds new components when clicked. For example Something like this. When dropped, there are no inputs but when clicked add new field, the input appears. Is it possible? how?
artf
You have to extend the View of your custom component
GJSBlock
Thanks for reporting this, @ZeroCoolHacker. Great question about Interactive component in canvas. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific modul...
{ "type": "text", "status": "hovered", "content": "Insert your text here", "attributes": { "id": "ixx2" }, "activeOnRender": 0, "open": false } In JSON I want add new key with object. Example data key this will have custom Traits. I want to add new object from where data can be fetch and populate the output. Can I do...
longdoan7421
Sorry I misunderstood your problem, so my previous comment was not relevant. To achieve your desire, you need create your own trait type (docs) and component type (docs). There is an easier way but it can not save all your custom data as a...
longdoan7421
I'm not sure if I get your problem. But if you set any custom attributes to component model (except some preserve keys like components, styles, ...) e.g: component.set('customTraits', yourCustomTraits);. It would be in JSON data.
vijaycreatise
I tried like this, but it is not working. I want to add data key and object in JSON, when user select form they can enter API url. Can you please check am I doing correctly?
For example, I want to add a double click event handler on the default video component to open the assets manager. My basic idea was to get the view definition of the video component and add events + handler. At last, set it back to the video component. Unfortunately, this idea failed in the first step. v.View() gives...
Joshmamroud
@archerbj here's a demo of what you're looking for: https://codesandbox.io/s/sharp-easley-3hrdn?file=/index.js You want to attach the functionality to the component type itself rather than trying to find all instances of that component and...
archerbj
@archerbj here's a demo of what you're looking for: https://codesandbox.io/s/sharp-easley-3hrdn?file=/index.jsYou want to attach the functionality to the component type itself rather than trying to find all instances of that component and...
abulka
@Joshmamroud Thanks for that running example. Yours is the only example I can find of using the extend feature mentioned in the documentation. Your example is very simple and zen - however it merely shows adding a dblclick handler to the v...
Please could anyone guide me on how to run the basic example given in the GrapesJS website using React.. PLEASE HELP
GJSBlock
Thanks for reporting this, @BaskarMN. Great question about Getting started example in React application. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific...
Version: 0.16.27 Are you able to reproduce the bug from the demo? [x] Yes [ ] No What is the expected behavior? When adding background-image via Style Manager it show as background-image: url(...);. What is the current behavior? Instead of background-image:url(https://grapesjs.com/docs/logo.png); you will get backgrou...
johnkeel-thork
Was about to report the same problem. Added Image as background: <img width="847" alt="Screenshot 2021-12-23 at 12 06 51" src="https://user-images.githubusercontent.com/26764290/147238562-8df3ea2a-aca7-4b08-9d64-73fd1495d699.png"> Its bein...
artf
Closing as from the same jsfiddle the issue seems to be solved
GJSBlock
Thanks for reporting this, @fq-selbach. The issue with linear-gradient CSS does weird things to background-image appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and...