How can I access preview mode on individual components in edit mode?

[flavortron]

I need to create a solution that allows me to click on elements within a given component in edit mode. I am able to add custom toolbar actions on a component level but i would also like to be able to create a component toolbar action that lets me interact with the content of a given component while in edit mode. Creating a popover menu with a list of options isn't a viable solution either-- The ask is for actually interacting with the component as you woud in preview. The closest functionality i've been able to find for this has been a fetaure that allowed the user to hold down the ctrl button in order to make the page content clickable in edit mode but this was for all page content. Is this possible? If so how would i go about it? 

[Asutosh_Jena_ · Accepted solution]

Hi @flavortron 

You can use the selector based approach if I understood the ask properly.

Let's say you have different component called abc and xyz. Now each of the component will have it's own script i.e., abc.html and xyz.html.

if you want to check the preview, you might include another script i.e., preview.html in each of the component and then you can access the page with pageurl.preview.html. This will ensure the preview.html script for each component to load and you can see the preview instead of actual component markup.

Thanks!