How to select the first Component
Question
I want to launch the editor with the style manager visible and populated. Meaning that a component is selected by default and the style manager shows the styles related to that selected component. I have been struggling with how to access the model. var domComponents = editor.DomComponents; When I print the following to the console log, I see the models, I just cannot figure out how to access them. domComponents.getComponents() I'd like to do something like: editor.select(domComponents.getComponents().models[0]); But that doesn't do anything. I tried to print this to the console log: domCompo...
Answers (3)
Do it when the editor is loaded
const dc = editor.DomComponents;
editor.on('load', () => editor.select(dc.getComponents().at(0)));
Thank you for your time. I just tried this and it is not working. Any other suggestion?
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 #714
Open Style Manager when selecting an element
trying to do this gives the error this.sender.get is not a function grapesjs.min.js toggleSm Basically I want to open the style manager whe...
Issue #482
Default asset manager in custom component
I am in process to create custom component for below template and we want to have user enter text,link,hover text and select image and want...
Issue #1814
[Question]: How to fire event which triggers component:selected with my component
I want to select my component whenever it is dragged from blocks to canvas and rendered, I have tried with registering events on component:...
Issue #631
How to refresh Classes view for active Component in the Style Manager
I'm using a trait (type=select) to change the class of a component (a "column" component, so classes representing width 1-12). After I have...
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.