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...
Hello, Is the Facebook social media component intended to be used to provide a Facebook link to a business or organizations Facebook page or is it exclusively designed to share something specific to your timeline? It appears to be the latter, even though that seems counter-intuitive to me since many emails simply prov...
artf
I guess you're looking for this https://github.com/artf/grapesjs-mjml
HeyWrecker
Ah, my mistake, then, thank you!
HeyWrecker
As a follow-up, I have confirmed that the Instagram social component does link to the IG profile page. Whereas the Facebook option does not link to the Facebook page.
I have a component using the background-url Style Manager property: I would like to reuse this UI that is shown in the Style Manager for a background URL trait that shows up under "Settings": Is it possible to make a Style Manager property behave like a trait and show up in the "Settings" section, or would I have to c...
artf
Unfortunately, it's not yet possible, but there is a plan to add soon a new UI module that should allow the reuse of UI elements
zachsnoek
:+1: Thank you!
GJSBlock
Thanks for reporting this, @zachsnoek. Great question about Creating trait with Style Manager property UI. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your spe...
Version: 0.16.44 Are you able to reproduce the bug from the demo? [ ] Yes [x] No What is the expected behavior? Legit anything else Describe the bug detailed I was attempting to load scripts into the canvas. My first attempt was scripts: [] and then I ran into the synchronization issue mentioned in this PR's thread: h...
KernelDeimos
I haven't used inline <script> tags in a while and forgot about this caveat of the HTML parser. Closing this.
GJSBlock
Thanks for reporting this, @KernelDeimos. The issue with Attempts to load scripts to canvas maybe breaks javascript?? appears to be a race condition or state management timing problem. This typically happens when component lifecycle events...
Hi @artf I followed the documentation to make new type of asset manager here ( https://codepen.io/abhi_punk81/pen/MWbWzaq) I've created new type like the same one in the docs How can i open that asset manager after dropping my custom block of icon -: At first it'll work fine but when i drop the image block after that...
Abhisheknanda1344463
@artf Achieved it and handle case-insensitive also https://user-images.githubusercontent.com/20657737/112457190-82d18980-8d81-11eb-895b-b5c42e849f3a.mov Thank you!! β€οΈ
Abhisheknanda1344463
Hi @artf somehow I've managed to do it On component active I called this -: It'll open my asset manager and I've added assets for this custom manager as well as you can see in the screenshot <img width="1105" alt="Screenshot 2021-03-20 at...
artf
Should be similar to what you've already done here editor.AssetManager.render(editor.AssetManager.getAll().filter(asset => asset.get('type') == 'svg-icon')); So find assets by search and update it with render
Hi again! Current situation:I start editingIn the layer manager I maximized the width of the move container ( the arrows icon ) so I can drag the element by clicking anywhereI am moving fast in the editor and I accidentally move the layer instead of selecting it What I want:I want to prevent the start of the moving ev...
GJSBlock
Thanks for reporting this, @RaresVlaiduc. Great question about what event is fired on component start move. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your spec...
Hi, @artf, this is a great framework, thank you very much. I am now using it to create components of the mobile BUI framework, and I ran into a problem, I added a custom trait textarea, how can I make this When the data changes, it is triggered in the output script.
Ju99ernaut
You'll need to add the trait to script-props, you can read more here https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts
imouou
Thanks @Ju99ernaut, If it is some built-in features, when modifying the script can receive the value of the parameter, I am currently experiencing problems: custom feature textarea, can trigger changes such as dom, but the exported script...
Hello. Grapesjs is a great tool. Thanks for it. I want to update the text value of a component by inputs, how can I do that?? if a user filled the input box with something like: TEA SITE, the title should change to it
artf
Just find the component and update it as you wish
millord
I'm also want something similar with my grapes app, but using react to update a text component via a control input. Somebody can help with that?