Sharepoint 2013 - How to view/edit security trimmed authenticated snippet for anonoymous users, in edit mode

Question

Within my custom .htm page layout I am using the following security trim snippet to display content to anonymous users only, which works great for that purpose alone! The yellow div with the black lining appears on the web page when a user log's out.

    <div data-name="SecurityTrimmedAuthenticated">
    <!--CS: Start Security Trim Snippet-->
    <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly" Permissions="ViewPages">-->
    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><span><!--PE: End of READ-ONLY PREVIEW-->

        <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
        You should replace this div with content that renders based on your Security Trim Properties.    
        </div>

        <!--PS: Start of READ-ONLY PREVIEW (do not modify)--></span><!--PE: End of READ-ONLY PREVIEW-->
        <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
        <!--CE: End Security Trim Snippet-->
  </div>

...but if I wanted to "also" view & edit this yellow div box in (publishing page edit mode) from the browser, what adjustments to this snippet should I make?

Thanks!

update - 3:44pm 7/1/2014

The following is my updated attempt in trying to create an editable content region that is viewed only when the user is logged out, but also in edit mode...

<!--MY SECURITY TRIMMED PANEL-->
<div data-name="SecurityTrimmedAuthenticated">
    <!--CS: Start Security Trim Snippet-->
    <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
    <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly" Permissions="ViewPages">-->
    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><span><!--PE: End of READ-ONLY PREVIEW-->

    <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
    This Security trim panel displays on the web page when the user is logged out.  But does not display in edit mode.
    </div>

    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--></span><!--PE: End of READ-ONLY PREVIEW-->
    <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
    <!--CE: End Security Trim Snippet-->
</div>


<!--MY EDIT MODE PANEL-->       
<div data-name="EditModePanelShowInEdit">
    <!--CS: Start Edit Mode Panel Snippet-->
    <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
    <!--MS:<Publishing:EditModePanel runat="server" CssClass="edit-mode-panel">-->
    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->

                <!--RICH TEXT EDITOR PANEL (with custom content type)-->
                <div data-name="Page Field: HTML Panel 1">
                <!--CS: Start Page Field: HTML Panel 1 Snippet-->
                <!--SPM:<%@Register Tagprefix="PageFieldRichHtmlField" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                <!--MS:<PageFieldRichHtmlField:RichHtmlField FieldName="62e56f08-669b-4bab-8cf1-4f60fff3022e" runat="server">-->
                <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div id="ctl02_label" style="display:none">HTML Panel 1</div><div id="ctl02__ControlWrapper_RichHtmlField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl02_label"><div align="left" class="ms-formfieldcontainer"><div class="ms-formfieldlabelcontainer" nowrap="nowrap"><span class="ms-formfieldlabel" nowrap="nowrap">HTML Panel 1</span></div><div class="ms-formfieldvaluecontainer"><div class="ms-rtestate-field">HTML Panel 1 content will be displayed here</div></div></div></div><!--PE: End of READ-ONLY PREVIEW-->
                <!--ME:</PageFieldRichHtmlField:RichHtmlField>-->
                <!--CE: End Page Field: HTML Panel 1 Snippet-->
                </div>
                <!--END RICH TEXT EDITOR PANEL-->

    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
    <!--ME:</Publishing:EditModePanel>-->
    <!--CE: End Edit Mode Panel Snippet-->
</div>

The code above works perfectly as it is. But when I try to combine them (placing the edit mode panel code inside of the security trimmed area), I see nothing on my sharePoint edit page. Any advice on how we can combine these panels together and still see editable content from edit mode, will be super.

Answer 1

I was able to build a JavaScript approach to solving my issue:

• Setup a security trimmed snippet to load a class on the <HTML> element to detect if the user is logged in or not.
• Create a custom content type that allows you to have 2 HTML panels on the same .htm page layout.
• Dedicate one panel to display content when the member is logged out, and the other panel for users who login. Use JavaScript to detect which class is loaded on the <HTML> element, to then dictate which panel of content gets displayed.