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
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.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.