How to add custom name to allready inserted components?
I can do that by adding data-gjs-custom-name="myname" Use name instead of custom-name (this one is used for Layers when you edit them), so data-gjs-name="myname"How is it possible to put a name on all h1, for example? You can create a custom component to extend the definition for H1 elements, so this will be applied t...
Read full answer below βQuestion
Hello..
I need to put af custom name on my components. I can do that by adding data-gjs-custom-name="myname" but how do i do that on allready inserted elements?
I tried to editor.SelectorManager.getAll().each(selector => $('h1').attr("data-gjs-custom-name","h1"));
but its not working. How is it possible to put a name on all h1, for example?
Answers (1)
I can do that by adding data-gjs-custom-name="myname"
Use name instead of custom-name (this one is used for Layers when you edit them), so data-gjs-name="myname"
How is it possible to put a name on all h1, for example?
You can create a custom component to extend the definition for H1 elements, so this will be applied to all H1 (even added lately) or you can do it interactively only on the components in the canvas in this way
editor.getWrapper().find('h1').forEach(
component => component.set('name', 'Name H1')
)
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2350
[Question] How do I add elements/sectors to views container using a custom button in the Panel
I have added a custom button to the Panel as below: const pm = editor.Panels; pm.addButton('views', { id: 'customButton', className: '', co...
Issue #2189
[Question] How to add "Ordered/Unordered List" option in rte/custom block
Hi I'm trying to create an ordered list with grapesjs. I tried adding the following to the rte: And this works if my page is pre-filled wit...
Issue #1720
[QUESTION] How to add the button in custom traits
Hi, I try to add a button to my custom traits for my custom blocks but its not working fine as expected and also need to know how to call t...
Issue #425
How to render external js file in our custom plugins
Hello, I am creating a slider plugins but its not working. because. I am not able to find how i can add or use external scripts and css fil...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins βPremium plugins ship with support, regular updates, and production-ready features β save days of integration work.
Browse premium plugins βRelated tutorials
In-depth guides on the same topic.
Tutorial
Building an AI-Assisted Document Engine with Next.js, GrapesJS, and the AI SDK
Transform your static template editor into an intelligent, generative design workspace with Vercel AI SDK, AI Elements and Next.js.
Tutorial
Ship to Production Faster: Whatβs New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.