GrapesJS Issues

3,464 parsed GitHub issues β€” 370 solved Β· 90 open. Search, filter and explore battle-tested answers.

829 issues found

πŸ” question
#3160November 27, 2020by congweibai2 answers
0 reactions

[Question] Add toggle-move label in custom setting panel in Vue

Version: ^0.16.18 This question is intended to extract layer moving function to custom one. I only want to given components could be seen in this components, and children components could be reorder in the panel. Assume these components are in same level. My code will be like this: I have seen reorder can be happened...

artf

No, in this case, you have to handle the sorting on your side

ClaudeCode

Thanks for reporting this, @congweibai. Great question about [Question] Add toggle-move label in custom setting panel in Vue. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documenta...

#3159November 26, 2020by sathyanarayananaCES2 answers
1 reactions

[Question] Is there any way to get the parser errors other than from console log

I am using the latest GrapesJS (v0.16.27). As per the fix for the issue, (#2029) the exception has been caught and logged into the console. Is there any way where we can get to know about the errors other than from console log? Something similar to asset:upload:error, if we have parse:error, it would be helpful to han...

artf

Usually, the error doesn't come from the parser but from the creation of the DOM (eg. the editor creates the element by using setAttribute). You can catch the editor's errors by listening to the log event Here, for example, you can put you...

ClaudeCode

Thanks for reporting this, @sathyanarayananaCES. The issue with [Question] Is there any way to get the parser errors other than from console log appears to be a race condition or state management timing problem. This typically happens when...

#3153November 23, 2020by excitedbox2 answers
0 reactions

FEAT: adding Dynamic Data Blocks

I am considering doing this one myself and as this has been requested so often I wanted to ask if this is already being worked on and if not maybe people would like to give some input. The way I picture it working is kind of like a form with a container block where you define the data source, method (post/get) for get...

artf

This kind of things could be done via plugins but I can't reply to your questions, are totally off-topic and it's up to your knowledge find the right answer (maybe try to ask on StackOverflow)

ClaudeCode

Thanks for reporting this, @excitedbox. Security and dependency issues are important. The GrapesJS team actively works on keeping dependencies up-to-date. For you right now: Run npm audit fix to see available patches Check for a newer Grap...

#3150November 23, 2020by michaelVictoriaDev2 answers
0 reactions

FEAT: Is there a way or tutorial how we can integrate in october cms ?

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

ClaudeCode

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...

#3144November 17, 2020by antman33512 answers
0 reactions

[Question] Swap default factories

Hello, I'm using GrapesJs to template HTML for printing so I need the measurements in mm. Is there a way to swap the default factory in the StyleManager? maybe pass it in the options? Thanks, Antonio

artf

No, you can't, you just need to configure your properties in the StyleManager configuration (example configuration can be found here)

ClaudeCode

Thanks for reporting this, @antman3351. Great question about [Question] Swap default factories. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific modul...

#3130November 10, 2020by jenter4 answers
2 reactions

[Question] Standard approach in slight restructuring the HTML toolbar & badge

Version: 0.15.10 This question is intended to validate if there is a proper way to extend the current https://github.com/artf/grapesjs/blob/master/src/canvas/view/CanvasView.js with a custom plugin. We were specifically reviewing the render() method within this file, to slightly alter the HTML to combine the toolbar a...

artf

Hi @jenter, good question. Unfortunately, I've never focused that much on the possibility of canvas extension or its UI elements, so for sure there is no right way to do that. If anyone is willing to propose solutions I'll be glad to evalu...

jenter

@artf I will review some proposals / thoughts and add it to this thread.

artf

Great, thanks Jason

#3119November 6, 2020by makkaronis4e4 answers
0 reactions

[QUESTION] How to create custom block made of grapesjs components?

Hi, i want to have custom blocks made of grapesjs components. I found solution how to add components: https://github.com/artf/grapesjs/issues/1334#issuecomment-411519845 but i'm struggling with adding CSS (eaiher as string or as object).

artf

You should be able to do something like this:

makkaronis4e

@artf thanks it works, but i found bug there. When you drop this block on canvas it works ok, but if you delete this element from canvas or clear whole canvas, then drop this block on canvas 2nd time, it will lose css. 2nd time, 3rd time.....

artf

@makkaronis4e for such a case, I'd ask you a reproducible demo, please

#3111November 3, 2020by theSC0RP2 answers
1 reactions

Question: How to trigger something (function) on adding asset?

Hi, @artf. What is the correct way to trigger a function when an asset is added to the assets by providing the link and then pressing the 'Add Image' button? I am running the open-assets command on an onclick event of a button in a custom panel and then trying to call a function when an image is added to the assets. I...

theSC0RP

Hey, @artf. I fixed the issue by changing the structure of my code. I was doing something wrong (my guess is that multiple instances of asset manager were open which ran the // my code part multiple times)

artf

Sorry @theSC0RP but I really don't understand what is your issue here. Are you able to provide a live example and clarify the steps?

#3091October 24, 2020by NeekoGta3 answers
4 reactions

[QUESTION] How to use grapesjs with static HTML

Sorry in advance for my English. I'm developing a CMS using Laravel and Vue.js. I want to use grapesjs for editing page content but with static HTML elements (like navbar, footer ...). Here is a simple image of what I would like to have. I went through the documentation to try to find answers and did several tests wit...

artf

There are different ways to achieve the same desired result, so I'd recommend checking these examples: Identify the editable component and ignore everything else https://jsfiddle.net/arturarseniev/aku70f5w/ Identify placeholder components...

NeekoGta

I found a solution by combining fromElement: true and this : https://github.com/artf/grapesjs/issues/336#issuecomment-332205060 But I have to use type: 'local' and can't use urlStore and urlLoad anymore. I have to implement myself the save...

NeekoGta

@akkivaghasiya5 2 years ago yes πŸ˜† But trying again today, it doesn't seem to work. fromElement seems deprecated now. @artf It's possible to you to provide example how we can achieve this? Thanks!

#3076October 16, 2020by Joshmamroud3 answers
3 reactions

QUESTION: Set component's empty state

Hi @artf , How would you recommend giving a component an empty state? Say, for instance, I have a layout component (ie. a column) which should contain child elements (ie. text component or image). When that layout component is empty I'd like to display some help text inside such as "Add an element here" and when it ha...

Joshmamroud

@artf You are THE MAN! I didn't even know the :empty selector existed. So simple, so awesome! Mind blown. Thank you!

artf

I've done something similar in this way using only CSS

hellocaio

Hi Josh, I like your idea. No expert here, but here are couple thoughts: Basically I would add some kind of flag to the component itself. idea 1) If the component is some kind of container (i.e. div), add a <p class="empty-message">Drag an...