I want to change the names of the default components that you can drag and drop onto the canvas, so that it shows different names in the layer manager and other places, mainly because of translation into other language. Examples: Body, Text, Row, Link, Image, etc. How would I do that?
giorgiosjames
It seems the display name for a component in the canvas and the layer manager is the block's type id, with the first letter upper-cased. From what I can tell, then only way to change this is to make a new type extending the old one, with a...
artf
You can update their names in this way. IMPORTANT: place the code in a plugin otherwise, you risk to the see updated names only with newly added components
lajby95
Thanks. This works nicely when adding new components, but say I load a preset html+css using editor.setComponents(html) and then start editing that later. The preset's HTML tags get the various component names (Text, Box, Image etc.) assig...
Thanks for providing the amazing framework and making it opensource. I'm looking to use Tailwind with GrapesJS, unfortunately grapesjs replaces "/" with "-" in the selector. Is it possible to override this? When I try to drag and drop responsive columns in canvas It replaces them to: How can I fix this issue? Please h...
artf
#1703 waiting for a help 😬
gavinhewitt
Thanks for providing the amazing framework and making it opensource. I'm looking to use Tailwind with GrapesJS, unfortunately grapesjs replaces "/" with "-" in the selector. Is it possible to override this?When I try to drag and drop respo...
chrisreedtech
What's your progress on making grapes work with Tailwind @inventorbit? Would love to see! @artf , I'm also curious if there is any progress on this or an available work around? Thanks for your time developing grapes!
This is how I've created a custom component: This is my custom block: The thing is that I have wrapped the image tag inside <a> tag when it is rendered to canvas. When I click on the element and try to drag it, only <img> tag gets dragged and <a> remains on it's original place. Live demo
artf
With this you're still letting the view capturing your click events, so fix it:
artf
Well, I see 2 different solutions for this case:Easy and fast, make the custom-video component not draggable, so you have to drag the parent to move it. The tiny downside is more from UX side, you force users to select the parent.More soli...
imanubhardwaj
Thanks @artf but a new problem is arising now, when I drag the custom-video-wrapper component across the canvas, custom-video isn't dragged with it, only the <a> tag is dragged. Live Demo
Hello All, I would like to emulate the assets manager image replace behavior. for example I created a view on the side with all the images that are present on the canvas. I would like that changes on the view will be reflected on the canvas, just like the way the assets manager is replacing images on the spot. Any hel...
hitaloramon
Hi @mmotov, I'll show you how I did it, it's easier to understand. When capturing the value of the image I define it in the same way, but below I do some checks to know if the element is a background or not. editor.Commands.add("open-asset...
hananint
Hi @Amir2828, I would like to connect with you on your work on GrapeJs if you are interested in a side project. Let me know
artf
@Amir2828 on select you have to change the src property of the Image component editor.getSelected().set({ src: 'https://.../image3.jpg' })
Go to https://grapesjs.com/demo.htmlClear canvasClick on body, add class, apply background colorBackground color now appearsClick Export -> Export to ZipOpen the Zip file and look at the index.html file. While the class was created in style.css, the class name was never applied to <body></body> in the html.
florinr1
I'm experiencing the same problem. The wrapper class attribute is set but the editor.getHtml() returns "<body></body>". I'm initalizing GrapesJS using: { fromElement: true, autorender: 0, // Size of the editor height: '100%', width: '100%'...
Hi, thanks for the nice work. I'll like to know if there is a way to use blade directives inside the code. I already add a new functionality to edit the source code, and work just fine. But when I write something like that, the canvas show a ugly text: And I like to find a way that @if don't render in the canvas. Do y...
artf
@msassa If you write the code like this, it's quite hard for the editor to understand it, but if you create a kind of custom conditional component you'll get more control over it. Here an example of your case where the condition can also b...
verdverm
What would parse that syntax during rendering? I've been looking at running react in the canvas, but we need to load react and transpile components we create. There is an in browser babel script to do something like this. Haven't got it fu...
msassa
Hi, I'm saving that code into a file, in S3. Later, I use that files in a Laravel application. Everything work fine, the only improvement I like to do, is: The code is correct as source code, and it has to be saved that way. But when I vis...
Not too sure how to explain it, but it appears that the style manager replaces 'AUTO' with the actual units. But if the user changes a value, e.g. margin-top. It saves the units, not the 'AUTO' value within the other fields that were not amended. Meaning the behavior of the div is unexpectedly different. e.g. no longe...
adamwpe
One of my settings was incorrect during testing.
danielwirz
Hi @adamwpe I have the exact same issue. What setting did you change to solve this? Thanks & best regards
AnnaSu
@adamwpe I have the same issue. How did you solve it?
Hi all. Thanks for creating and maintaining this amazing project. 🙏 Bug Description I have a block that inserts a script as specified here: https://grapesjs.com/docs/modules/Components-js.html#basic-scripts When I drag the block to the canvas, the component will indeed have the script attached to itself. However, whe...
dosponsor
Can you please provide the solution for this issue.
artf
Thanks for the report @Sparragus The problem here is when you use a function for the script inside Blocks. When the editor tries to store the JSON the structure is serialized but the function is not serializable so for that component an em...
I'm currently using GrapesJS as a Letter/Form Composer, and it's been working wonderfully so far. However I'm just finishing up the last few requirementsI'm scaling the canvas to the size of an A4 piece of paper so that when it prints, everything is consistent with the form they've built. However, I'm unsure whether o...
bloigge
@tsuwunrut-carecloud - did you find a solution for your problem? I am facing something similar.
bharatnadkarni
@tsuwunrut-carecloud @bloigge @sagarneo11 did any of you find a solution to this?
sagarneo11
@tsuwunrut-carecloud, Can you please let us know if you find solution on above mentioned function?, would love to have same function in my app it would be really helpful if you could suggest.
First of all, Amazing project thumbs up to everybody involved. I have a couple of questions:How can I iterate over all of the components and change their content on the canvas. I would like to implement a find and replace function that will replace a specific string in all of the Elements inside the canvas. Is there a...
Amir2828
Ok I Managed to solve the 1st problem. I used get components and recursively iterated on the tree. When I finished I used the DomComponents.render() Still looking for some direction regarding the 2nd question
Amir2828
Ok I think I also managed to figure out the 2nd question. I injected to the Canvas JQuery script which made the Accordions and Sliders Behave as expected.
Amitkumar85533
Hi @Amir2828 , Can you tell me about the accordion? Can you give a small example?