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...
Hello I am trying to add a Graph JS block with this code but whenever I would drag the new block I would get an error: How do I add a script to a content to generate the chart? Also are third party scripts allowed in GrapesJS or are there properties that needs do be defined in initializing the editor? Thank you!
zyxnowell
I just figured it out, you just need to declare your custom JS in the init method and set allowSripts to true
I have created a component var comps = editor.DomComponents; var defaultType = comps.getType('default'); var defaultModel = defaultType.model; var defaultView = defaultType.view; comps.addType('module', { model: defaultModel.extend({ defaults: Object.assign({}, defaultModel.prototype.defaults, { droppable: false, edit...
I am trying to save the template data into the database. Currently I have it working successfully. It posts the Assets, Components, Styles, Html, and CSS data (just like how it saves into the browser's localStorage) to a PHP script. As I found out, the Components part ( editor.getComponents() ) contains the Html struc...
alikabeer32
Is your javascript code actually getting set? It might be because the framework, by default, doesn't set js when you run editor.setComponents(yourhtml); const editor = grapesjs.init({ ... allowScripts: 1, }); this might help you. All the b...
lajby95
@alikabeer32 Hmm, that seems to have solved the problem. Thanks!
Hi @artf , I have created some custom components with traits. I save the file and reload not able to see the attributes in the editor and in preview mode. However those attributes can be seen in the code manager. Is there anyway to make show it? If i give any event based on the attributes events are not getting trigge...
artf
Please read carefully this part https://grapesjs.com/docs/modules/Storage.html if it's still not working, open a bug issue and create a reproducible demo
I'm currently using GrapesJS to build an editor for blog posts in my website. One of the things that I wanted to change from the default behavior was the inability to "unlink" a piece of text that had been converted to a hyperlink using the rte toolbar. So I wrote the following function: The function allows you to uns...
artf
Is this an issue with how components are handled by grapesjs? Could you help me understand why this might be happening and what I can do to address this? Yeah, it's how the built-in text component and RTE work, so I'd just update your resu...
I need to limit certain Dom Components to one, because it would cause issues when the page is published - but I can't seem to find a way to delete the component within its own init(). Is there a better way, as it doesn't seem healthy to delete someone before it's fully created. Thanks
artf
It would make sense to move such logic to a parent component
Hey, I'm searching for the right way of loading template, generated by GrapesJS, but nothing is loading. Can someone please check, maybe format is not ok. https://api.myjson.com/bins/14o5yz There is no error message, just empty editor. Data is saved in the database with the following code The type of the columns is TE...
georgikolev7
Issue was caused by invalid JSON data inside "gjs-components" on saving, which breaks the loading later.
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