Find component associated with HTML element in iframe/visual editor.
You can query the wrapper to get component models, eg. BTW it's not clear why the content is not updating while you say I can change the text in the visual editor (inside the iframe)
Read full answer below ↓Question
Hi!
I'm working on an implementation of GrapesJS where I can a drag&drop a piece of text from outside GrapesJS into an existing text element/component. I don't use the drag&drop functionality of GrapesJS for this, but the native (browser) drag&drop.
I have some code working for this, a working drag & drop, and I can change the text in the visual editor (inside the iframe). But this doesn't change the actual content of the document, as they are processed/stored in the background (in components, correct?).
Now I'm looking for a way to find the component associated with a HTML element, so I can push the text in that component.
I hope that is clear! I tried looking for existing issues about this, and I found many about updating the content of components, but not a good clue to how to actually get the component I want to update...
Answers (3)
You can query the wrapper to get component models, eg.
const component = editor.DomComponents.getWrapper().find('#somid')[0];
component.components(`<div>Add some content inside</div>`);
BTW it's not clear why the content is not updating while you say I can change the text in the visual editor (inside the iframe)
Thanks! I'll give it a go tomorrow.
By the way, I update the text via JQuery using the text() function, but when I move the element to a different position the original text reappears again.
I had the same issue where I move the component with drag and drop. My solution was to add a text component inside my custom component. :)
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3832
The css classes are removed and the autogenerated ids for each html tags gets changed ( Example : ivj5m-2) after each reload
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link Not there De...
Issue #6683
Modals close on mouseup event outside of modal rather than a full click
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 143.0.7499.169 Reproducible demo li...
Issue #1875
[QUESTION] ID changes when importing html or passing html in components prop in config.
Hi, I built a component and block that I can drag and drop in the canvas. My issue is that some styles rely on the ID. I know this might no...
Issue #5112
GrapeJS/drag and drop not working for Brave on Linux and Wayland
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 1.51.110 Chromium: 113.0.5672.77 (...
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 →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.