How I Get ID From Block?
You can use this inside the script to reference the block element. If you want the id you can use this.id. Note that document.getElementById(this.id) == this
Read full answer below ↓Question
Hi, i have my block and I get print in Div id results from my javascript class component... How i get ID from my block ??? editor.BlockManager.add('test-block', { label: 'Test block', attributes: {class: 'fa fa-text'}, content: { content:'<div id=""></div>', script: function () { console.log(document.getElementById("MyBlockDivIDHere")); uil.add('joystick', { target: document.getElementById("MyBlockDivIDHere"), pos:{left:'0', top:'0', bottom:'0' }, name:'JOY', w:100, multiplicator:1, precision:2, fontColor:'#D4B87B' }); }, style: { width: '100px', height: '100px', 'background-color': 'red', }...
Answers (2)
You can use this inside the script to reference the block element. If you want the id you can use this.id.
Note that document.getElementById(this.id) == this
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #792
Script property using function don't work with blocks
In Components & JS docs there's this example: This works perfectly. But I couldn't use a function instead of a string in script, as is said...
Issue #634
How can I pass content with script?
I made custom component like this way and used script as well then script is working fine but I am not able to select component. Is there a...
Issue #1034
insert element or block inside parent element
Good day, i have component, have block i have Trait on listen changes, how can I add "h1 " inside that block "'<div class="container" style...
Issue #1584
Not getting the Script of Block from editor.getComponents()
Below is the Component that I'm adding. this.editor.BlockManager.add('dob-mmyy-pii', { id: 'dob-mmyy', label: DOB (MM, YYYY) (PII), categor...
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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.