Detecting content editor for widget conditional statement

[MichaelDev]

I'm creating a custom module for a page. I'd like it to show a certain style for the HTML when it's in the content editor preview.

Meaning, when someone from our editorial team is creating a post, I'd like them to see something different for the widget than when it's being displayed on the website.

I tried looking for a class that's unique to the body tag when the post is being edited but couldn't find anything. Is there a CSS selector I could use that'll work in the preview editor or some conditional statement I could use to detect when it's on the website VS. editor?

Thanks!

[MichaelDev]

Hey everyone, thanks for all the help with this! You helped me resolve this 🤗

I have an audio player on a template with a text field for the MP3 URL. I was trying to make it clear to the admin that the MP3 hasn't been added while not publishing that message with the page, in case they knowingly need to leave out the MP3.

By using @Kevin-C idea of using the HTML element's hs-inline-edit class, I was able to force display block of my admin message when hs-inline-edit exists and hide it otherwise. I don't know why I was stuck on looking at the BODY element's classes...

@BarryGrennan - Your idea of using hs-content-id-1 was a great alternative. I'd accept both answers if I could. Thanks!

[BarryGrennan]

It looks like preview content is in an iframe. Which will probably make this very tricky (impossible?)

The iframe source is "//preview.hs-sites.com..." which I'm thinking makes it subject to the "same origin policy" as it's a differnt URI to the Design Previewer.

I don't know all the ins and outs of iframes (other than that I hate iframes 😅) 

Something that might help: the variable  {{builtin_body_classes}} outputs body classes and it seems on the previewer it outputs "hs-content-id-1" where on an actual page it'll output a more complex class like "hs-content-id-35288832863"

So maybe you could wrap your content in a div that has {{builtin_body_classes}} as a class and style using .hs-content-id-1 as a top level element.

I don't think that'd cause any issues on your site as it's probably unlikely that "hs-content-id-1" is being used elsewhere, but operate with caution just in case.

[BarryGrennan]

Yup, this worked in my quick test.

So in my html I have 

<div class="{{builtin_body_classes}}">
<a href="http:website.com">I'm a link</a>
</div>
      

Then my css is 

.hs-content-id-1 a {
  color:purple;
}

The links show as purple in the preview but as my default in actual pages.

I don't think it's that likely to have any effect arround the site, especially considering it'll be used in the module css and as mentioned on an actual page it'll output a more complex class like "hs-content-id-35288832863"

[Kevin-C · Accepted solution]

Hey @MichaelDev 

I've been looking into something smilar lately. So I'm very excited to see how this turnouts for you!

There are a number of classes and properties you could test against:

I've been ooking at using "hs-inline-edit" which is applied to the html tag.

Keep us posted on the progress!

[Kevin-C]

@MichaelDev 

You got me thinking and lo and behold after a little digging I found an even better option!

When in the editor the window object will contain a property called "hsInEditor" with a value of "true".

And when viewing page outside of the editor the property is not declared!

[Anton]

Hi @MichaelDev, 
what exactly do you want to show differently? What do you want to achieve?
Do you want to change the fonts, colors or general look&feel of the post? 

best, 
Anton