Inline Javascript in Generic Content

Posted by Community Admin on 03-Aug-2018 14:35

Inline Javascript in Generic Content

All Replies

Posted by Community Admin on 24-Aug-2011 00:00

Hello,

We are using Sitefinity 4.2 in our website, and we need to have a shared generic content that contains some javascript code, so we create a user control "ContentBlockDesignerTemplate.ascx" and set the "EditorContentFilters" attribute of the HtmlEditor to "None":

001.<%@ Control Language="C#" %>
002.<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
003.<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
004.<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="designers" Namespace="Telerik.Sitefinity.Web.UI.ControlDesign" %>
005.  
006.<sf:ResourceLinks id="resourcesLinks" runat="server">
007.    <sf:ResourceFile Name="Styles/Window.css" />
008.</sf:ResourceLinks>
009.  
010.<telerik:RadWindowManager
011.    ID="windowManager"
012.    runat="server"
013.    Behaviors="None"
014.    Skin="Sitefinity"
015.    ShowContentDuringLoad="false"
016.    VisibleStatusBar="false"
017.    VisibleTitleBar="true">
018.    <Windows>
019.        <telerik:RadWindow ID="contentPages" runat="server" Height="250" Width="425" Modal="true" NavigateUrl="~/Sitefinity/Dialog/ContentPagesDialog" ReloadOnShow="true" Behaviors="Close" />
020.        <telerik:RadWindow ID="preview" runat="server" Height="100" Width="100" Modal="true" NavigateUrl="~/Sitefinity/Dialog/ContentViewEditDialog?ControlDefinitionName=ContentBackend&ViewName=ContentBackendPreview&SuppressBackToButtonLabelModify=true" />
021.    </Windows>
022.</telerik:RadWindowManager>
023.  
024.<div id="selectorTag" style="display: none;" class="sfDesignerSelector sfFlatDialogSelector">
025.   <designers:ContentSelector
026.       ID="sharedContentSelector"
027.       runat="server"
028.       TitleText="<%$Resources:ContentResources, SelectSharedContentYouWantToUse %>"
029.       BindOnLoad="false"
030.       AllowMultipleSelection="false"
031.       WorkMode="List"
032.       SearchBoxInnerText=""
033.       ShowProvidersList="true"
034.       SearchBoxTitleText="<%$Resources:Labels, NarrowByTyping %>"
035.       ListModeClientTemplate="<span class='sfItemTitle'>Title</span><span class='sf_binderCommand_viewContentPages'>PagesCountUIString</span>">
036.   </designers:ContentSelector>
037.</div>
038.<sf:PromptDialog
039.    ID="shareContentDialog"
040.    Title="<%$ Resources:ContentResources, SharedContent %>"
041.    TextFieldTitle="<%$ Resources:ContentResources, Title %>"
042.    runat="server"
043.    Width="350"
044.    Height="300"
045.    Mode="Input"
046.    AllowCloseButton="true"
047.    ShowOnLoad="false">
048.    <Commands>
049.        <sf:CommandToolboxItem Text="<%$ Resources:ContentResources, ShareThisContent %>" CommandName="shareContent" CommandType="SaveButton" WrapperTagName="LI" />
050.        <sf:CommandToolboxItem Text="<%$ Resources:Labels, Cancel %>" CommandName="cancel" CommandType="CancelButton" WrapperTagName="LI" />
051.    </Commands>
052.</sf:PromptDialog>
053.  
054.<sf:PromptDialog
055.    ID="unshareContentDialog"
056.    Message="<%$ Resources:ContentResources, AreYouSureYouWantToUnshareThisContent %>"
057.    runat="server"
058.    Width="300"
059.    Height="300"
060.    Mode="Confirm"
061.    AllowCloseButton="true"
062.    InputRows="5"
063.    ShowOnLoad="false">
064.    <Commands>
065.        <sf:CommandToolboxItem Text="<%$ Resources:ContentResources, UnshareThisContent %>" CommandName="unshareContent" CommandType="NormalButton" WrapperTagName="LI" />
066.        <sf:CommandToolboxItem Text="<%$ Resources:Labels, Cancel %>" CommandName="cancel" CommandType="CancelButton" WrapperTagName="LI" />
067.    </Commands>
068.</sf:PromptDialog>
069.  
070.<sf:FormManager ID="formManager" runat="server" />
071.<div id="editView" class="sfContentBlocksDesignerWrp">
072.    <sf:HtmlField
073.        ID="htmlEditor"
074.        runat="server"
075.        Width="99%"
076.        Height="370px"
077.        EditorContentFilters="None"
078.        EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
079.        DisplayMode="Write"
080.        FixCursorIssue="True">
081.    </sf:HtmlField>
082.    <sf:CommandBar id="editViewCommandBar" runat="server" WrapperTag="div" WrapperCssClass="sfContentBlocksBtnAreaBottom">
083.        <Commands>
084.            <sf:CommandToolboxItem runat="server" CommandName="selectSharedContent" CommandType="NormalButton" CssClass="sfChange" Text="<%$Resources:ContentResources, SelectFromExistingSharedContent %>" />
085.            <sf:CommandToolboxItem runat="server" CommandName="shareContent" CommandType="NormalButton" CssClass="sfChange" Text="<%$Resources:ContentResources, ShareThisContentAcrossPages %>" />
086.        </Commands>
087.    </sf:CommandBar>
088.</div>
089.<div id="previewAndEditContentView" class="sfContentBlocksDesignerWrp">
090.    <div class="sfNeutral sfClearfix">
091.        <asp:Label ID="sharedContentLabel" runat="server" Text="<%$Resources:ContentResources, ThisContentIsShared %>"></asp:Label>
092.        <asp:HyperLink ID="viewPagesLink" runat="server" NavigateUrl="javascript:void(0);" CssClass="">
093.            <asp:Literal ID="viewPagesLiteral" runat="server" Text="<%$Resources:ContentResources, ViewAffectedPages %>" />
094.        </asp:HyperLink>
095.        <div id="editOutDatedContentView">
096.            <span class="sfFailure">
097.                <asp:Literal ID="newerVersionLabel1" runat="server" Text="<%$Resources:ContentResources, ThereIsNewerVersionOfThisContent %>" />
098.                <asp:HyperLink ID="previewLink" runat="server" NavigateUrl="javascript:void(0);" CssClass="">
099.                    <asp:Literal ID="previewLiteral" runat="server" Text="<%$Resources:Labels, Preview %>" />
100.                </asp:HyperLink>
101.                <asp:Literal ID="orLabel" runat="server" Text="<%$Resources:Labels, or %>" />
102.                <asp:HyperLink ID="updateLink" runat="server" NavigateUrl="javascript:void(0);" CssClass="">
103.                    <asp:Literal ID="updateLiteral" runat="server" Text="<%$Resources:Labels, Update %>" />
104.                </asp:HyperLink>
105.                <asp:Literal ID="newerVersionLabel2" runat="server" Text="<%$Resources:ContentResources, WithTheNewerVersion %>" />
106.            </span>
107.        </div>
108.  
109.        <sf:CommandBar id="commandBar" runat="server" WrapperTag="div" WrapperCssClass="sfContentBlocksBtnAreaTop">
110.            <Commands>
111.                <sf:CommandToolboxItem runat="server" CommandName="editContent" CommandType="NormalButton" CssClass="sfChange" Text="<%$Resources:ContentResources, EditThisContent %>" />
112.                <sf:CommandToolboxItem runat="server" CommandName="unshareContent" CommandType="NormalButton" CssClass="sfChange" Text="<%$Resources:ContentResources, Unshare %>" />
113.            </Commands>
114.        </sf:CommandBar>
115.    </div>
116.    <sf:SitefinityLabel id="contentLabel" runat="server" WrapperTagName="div" CssClass="sfSharedContentPreviewWrp"></sf:SitefinityLabel>
117.    <sf:HtmlField
118.        ID="contentEditor"
119.        runat="server"
120.        Width="99%"
121.        Height="370px"
122.        EditorContentFilters="None"
123.        EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
124.        DisplayMode="Write"
125.        FixCursorIssue="True">
126.    </sf:HtmlField>
127.</div>
128.  
129.<sf:ClientLabelManager id="clientLabelManager" runat="server">
130.  <Labels>
131.    <sf:ClientLabel ClassId="ContentResources" Key="ThisContentIsShared" runat="server" />
132.    <sf:ClientLabel ClassId="ContentResources" Key="ThisContentIsSharedAccross" runat="server" />
133.    <sf:ClientLabel ClassId="ContentResources" Key="ViewAffectedPages" runat="server" />
134.    <sf:ClientLabel ClassId="PageResources" Key="Page" runat="server" />
135.    <sf:ClientLabel ClassId="PageResources" Key="Pages" runat="server" />
136.    <sf:ClientLabel ClassId="Labels" Key="Back" runat="server" />
137.    <sf:ClientLabel ClassId="Labels" Key="SaveChanges" runat="server" />
138.    <sf:ClientLabel ClassId="Labels" Key="Save" runat="server" />
139.  </Labels>
140.</sf:ClientLabelManager>
141.  
142.<script type="text/javascript">
143.    $("body").addClass("sfContentBlockDesigner");
144.</script>

Then I mapped this user control to the content block designer template (please see the attached screenshot).

Now, the generic content allows me to write a js snippet code, then by saving the content block and reopen it, the js code disappears from the html view mode of the editor, if I click on "Back to Content blocks" then reopen the generic content, the js code appears again.

Am I missing anything so the js code doesn't appear from the first time I open the content block??

Thanks.

Posted by Community Admin on 26-Aug-2011 00:00

Hello Amrelsayed,

This is stranged. I reproduced your setup and for everything worked from the first time. I added the following <script> tag

<script typr="javascript">alert("Test");</script>

and upon clicking Save I even got an alert that says Test. Then after reopening the content block the snippet was there. Could you provide some additional info and/or screenshots please.

Greetings,
Lubomir Velkov
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Posted by Community Admin on 28-Aug-2011 00:00

Hello Lubomir,

Please review the attached screen shots, first I created a content block, saving it then trying to reopen the content block, the js snippet disappeared (2-OpenSavedContentBlock.png).
Cancel the editing, then trying to reopen the content block, the js snippet code is there (3-ReopenContentBlock.png)

Any suggestions?

Thanks.

Posted by Community Admin on 31-Aug-2011 00:00

Hi Amr,

I think you forgot to attach 2-OpenSavedContentBlock.png and 3-ReopenContentBlock.png - there is just Administration.png, which shows the template mapping. Now, I was testing when adding content block widgets to a page and everything worked ok. When I tested by adding a Content block under the menu Content -> Content blocks my <script> tags were stripped at first, and on the second time I went directly to HTML view, which looks like a cached page, and this is why the <script> tags are there. If you reload the page the <script> tags disappear again.

This means that you map the wrong Content block template, since the HtmlField does not allow script tags.
I think you need to remap some other template in order for this screen to work as the one for the page widget.

Best wishes,
Lubomir Velkov
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Posted by Community Admin on 04-Sep-2011 00:00

Hi Lubomir,

Do you mean that I mapped the wrong html template for the content block?
If so can you send to me the right template used in Sitefinity 4.2?

Thanks.

Posted by Community Admin on 05-Sep-2011 00:00

Hey Amr, In 4.2 they've exposed most of the radeditor settings in the backend of sf4 now so you no longer need to map external views (awesome). All the filters and tools file settings should be there, would that work? (I'm on mobile so I dont have an easy way to get you a link, but on my site I the articles>how to section there's instructions on setting up the tools file.XML...so the filters are in the same area. (don't forget to ummap your view) ...this all assumes you only mapped the view to change the editor settings. Steve

Posted by Community Admin on 06-Sep-2011 00:00

We are still having the same issue that javascript snippet codes disappear.

These are the detailed steps I followed:
1- I created a new testing 4.2 website. (with no mapping to the any controls)
2- Make sure that the "None" filters are applied to the radeditor (please refer to  AdministrationSettings.png)
3- Create a new content block from (Content > Content blocks) and add a js snippet code in the html design mode of the editor (CreateContentBlock.png) then I saved the content block (which returns to the Content blocks list).
4- If I open this content in the edit mode again, a cached page will be opened and the the editor will be opened in the html design mode with the js snippet code.
5- But if I try to go anywhere to the website (go to the news page for example) and come back to the content blocks list, and reopen the content block in the edit mode, the editor will be opened in the design mode, and by switching to the html mode the js will not be there. (ReopenContentBlock.png)
6- When I click "back to content blocks" (which returns to the content blocks list), then reopen the content block in the edit mode, the editor will be opened in the html mode and the js snippet of code is there (EditContentBlock.png)

We would appreciete proper attention as this has been pending for a while.
Thanks.

Posted by Community Admin on 07-Sep-2011 00:00

Hello Amr,

Please check this following blog post on how to remap the HtmlField - I suggest you simple override the whole HtmlField behaviour around the entire Backend:

http://www.sitefinity.com/blogs/joshmorales/posts/11-07-26/customizing_sitefinity_4_controls_with_the_viewmap.aspx

All the best,
Lubomir Velkov
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

This thread is closed