Hello, this is really a very very nice tool Can you share some insights, in the settings, and I can help with adding more so it can be rolled into the Wiki for others.How to how to extend settings to allow user to select/switch/change the Graph type, for e.g. Bar graphAllow user to pick a data source for a table, from...
artf
You have to extend the toolbar property https://grapesjs.com/docs/api/component.html#properties
Version: 0.16.18 Are you able to reproduce the bug from the demo? No What is the expected behavior? I want to hide the default preview button while keeping the default "View code" button. What is the current behavior? "View code" no longer works if the preview button is removed via ` Are you able to attach screenshots...
mcottret
Hi @rudym87 ! The problem seems to be caused by the deactivation of the button clicked to run the command (cf below), which causes the modal to instantly close. https://github.com/artf/grapesjs/blob/a85126883fbeafe3a437b1421b952931a5aaafc0...
artf
correct @mcottret, honestly, I don't even see the reason anymore to keep this command stateful. So, I'd remove that useless sender.set('active', 0) and the stop function from it. Let me know if you have a better idea
Hi, I am trying to create a custom countdown timer block. The code is as follows: I am adding content inside 'table' tag. The moment I drag and drop the block I get an error - Uncaught TypeError: t.get is not a function. Please refer the below screenshot: But, It works again If I make any changes on editor. Refer the...
artf
As you can see the error is triggered from grapesjs-plugin-social, so not related to the core. One only thing I can suggest is to use tbody tag inside your table
Hi artf, I'm newbie with this Grapesjs. How to add event for a component and get the corresponding javascript or jquery ? Thank all
RJCAM
Hi @dat15021999 GrapesJS doesn't have support for javascript code, only html and css. Although, you can retrieve all js code by running editor.getJs() function.
Ju99ernaut
You can use something like: To add an event for example you set code to: You can check out grapesjs-script-editor and grapesjs-blockly plugins. EDIT: You should use target.getScriptString() instead of target.get('script').
Hi, I have started using grapesjs and for some reason some of the icons from the Block Manager are missing. I can see that the icons displayed use font awesome, while the icons not displayed have the classes "gjs-fonts" and for example "gjs-f-b1" When looking at the CSS, I can find these styles: Why can't I see any ic...
EmilIpsen
Just in case anyone else gets this, and ends up here without an answer: I had this issue, after downloading the raw CSS + JS files from unpkg - the exact same files worked fine when running from the CDN, but I got the same error when point...
sailor95
Hi @jamejillagit , did you find the solution for this? I also faced the same.
Version: 0.15.10 Hi! I am using Jest for testing my Grapes.js components. I need test my components behavior in a different environment like an edit mode and preview mode in Grapes.js editor. When I test in edit mode everything is fine but when I need test in preview mode I try to run script editor.runCommand('preview...
ghost
I forget to add editor wrap element in current document so editor initializing by me was not existing in DOM The solution on 12 line: <img width="488" alt="solution" src="https://user-images.githubusercontent.com/48758473/90397413-77f2a000...
Hey @artf, Steps: Open Canvas with GrapesJS, select any of the components, then click on Go to Random, I get an error that says "Cannot read property 'models' of undefined". This only happens if I call the editor.destroy() before navigating to a different page. But if I remove the destroy, it works fine... Demo: https...
artf
Thanks @cartifon should be fixed in the next release
Nelida27
Hello, I have the same problem now that I moved to latest version. Should I call editor.destroy()?
Hi, I have Button-Link custom component created, and when I dragged into canvas for the first time component is detecting its attributes and styles. But after saving the component and reloads the page, custom component type is missing from that component instead its showing Link type component. How to preserve the cus...
DmitryTar1
You should add some type to your component and then parse it in isComponent For example the similar button link const components = editor.DomComponents; const link = components.getType('link'); components.addType('custom-link-button', { mo...
Ju99ernaut
@krishnaeverestengineering How are you saving and loading your work
artf
Read the documentation please https://grapesjs.com/docs/modules/Storage.html
When using trying to add a font to the style manager, I use the following code: const prop = editor.StyleManager.getProperty('typography', 'font-family'); prop.set('options', [ {value: "'Oswald', sans-serif", name: 'Oswald'}, ... ]); However, when I use this inside a plugin (in the index.js) I am creating, I call it w...
mcottret
Hi @tasham16 ! I think this is expected behaviour because modules are loaded after plugins in the editor's initialization sequence, & sectors are only added to the StyleManager module right after it has been loaded. I don't know if this is...
tasham16
Thank you so much! I will try that out!
artf
The right way is to wait for the load of the editor
Hi all, I would like to get some guidance about the code I should add/edit in order to change the way panels look. In general, I will need to change all the UI styles, but I want to start with blocks, layers, and style managers. I want to be able to change the layout, colors, etc in order to make it fit my brand image...
Joshmamroud
> @sircoko Can you provide some code examples of what you have and explain in more detail what you're confused about?Well, not code but I can explain my needs quite better with an image...In a few words, I want to go from here: https://img...
Joshmamroud
@sircoko Can you provide some code examples of what you have and explain in more detail what you're confused about?
sircoko
@sircoko Can you provide some code examples of what you have and explain in more detail what you're confused about? Well, not code but I can explain my needs quite better with an image... In a few words, I want to go from here: https://img...