[Question]: Find component associated with HTML element in iframe/visual editor.
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 #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 #1907
[QUESTION]: Drag and drop external html to editor ?
I have created a component which is heading and a block element for it. I have set the draggable property to be section html element. If I...
Issue #944
Drag and drop blocks is not working in IE Browser
Hi, There is some bug related to "Drag and drop functionality is not working in IE Browser ", i have tried to find out the solution regardi...
Issue #3832
BUG: 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...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.