Inserting java script using pasteHtml method

12 posts, 0 answers
  1. Petr
    Petr avatar
    6 posts
    Member since:
    Jan 2011

    Posted 04 Jul 2011 Link to this post

    Hi,

    according to advice from your forum, I'm putting there my question:

    I'm using SF 3.7 and I'm trying to put customized action for inserting control for JW Player. I have code, which works, and which is using script tags. But, if I insert this code via pasteHtml method, then the part with script tags is omitted. the same code with set_html works - but I don't want to lost previous content, so I have to use pasteHtml method.

    So, it is known bug or I have to use another method?

    Thanks

    Petr
  2. Rumen
    Admin
    Rumen avatar
    14031 posts

    Posted 05 Jul 2011 Link to this post

    Hello Petr,

    It is the browser that strip the <script> tags if they are not preceded by some content. To fix the problem put a simple &nbsp; before the opening <script> tag, e.g.

    editor.pasteHtml("&nbsp;<script>alert(1);</script>");

    Kind regards,
    Rumen
    the Telerik team
    Register for the Q2 2011 What’s New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
  3. Petr
    Petr avatar
    6 posts
    Member since:
    Jan 2011

    Posted 05 Jul 2011 Link to this post

    Hi Rumen,

    thanks, for this sample code works. But, why the pasteHtml method can't insert code like this?

    <DIV id=mediaspace0 style="BACKGROUND-IMAGE:
    url(/sitefinity/admin/controltemplates/generic_content/player.jpg); WIDTH: 441px;
    HEIGHT: 235px" name="mediaspace0"></DIV>
    <SCRIPT type=text/javascript>var cnt = document.getElementById('mediaspace0');
    var src = '/sitefinity/wmvplayer.xaml';var cfg = {file: 'http://myurl'
    ,image: '',height: '240',width: '440'};var ply =
    new jeroenwijering.Player(cnt, src, cfg);</
    SCRIPT>


    If I try to paste this code, only the part without <script> tag is inserted:

    <DIV id=mediaspace0 style="BACKGROUND-IMAGE:
    url(/sitefinity/admin/controltemplates/generic_content/player.jpg); WIDTH: 441px;
    HEIGHT: 235px"
    name="mediaspace0"></DIV>

    So, what's I'm doing wrong?

    Thanks for your advice

    Petr
  4. Rumen
    Admin
    Rumen avatar
    14031 posts

    Posted 06 Jul 2011 Link to this post

    Hi Petr,

    You should escape the " symbols as well as disable the RemoveScripts filter of RadEditor:

    <telerik:radeditor runat="server" ID="RadEditor1"></telerik:radeditor>
    <input type="button" value="Paste Content" onclick="InsertSpan();return false;" />
    <script type="text/javascript">
        function InsertSpan() {
            var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to the editor
            editor.pasteHtml("<DIV id=mediaspace0 style=\"BACKGROUND-IMAGE:url(/sitefinity/admin/controltemplates/generic_content/player.jpg); WIDTH: 441px;HEIGHT: 235px\" name=\"mediaspace0\"></DIV><SCRIPT type=text/javascript>var cnt = document.getElementById(\'mediaspace0\');var src = '/sitefinity/wmvplayer.xaml';var cfg = {file: 'http://myurl',image: '',height: '240',width: '440'};var ply = new jeroenwijering.Player(cnt, src, cfg);<\/SCRIPT>");   
        }
    </script>

    Codebehind:
    RadEditor1.DisableFilter(Telerik.Web.UI.EditorFilters.RemoveScripts); 


    All the best,
    Rumen
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  5. Petr
    Petr avatar
    6 posts
    Member since:
    Jan 2011

    Posted 07 Jul 2011 Link to this post

    Hi Rumen,

    unfortunately, it doesn't work. I've added escape characters into code and still only part without script tag is inserted. I've added DisableScripts into Page_load event as well.

    code = "<DIV id=\'"+id+"\' style=\'BACKGROUND-IMAGE:
     url(/sitefinity/admin/controltemplates/generic_content/player.jpg);
    WIDTH: 441px; HEIGHT: 235px\' name=\'"+id+"\'></DIV>
    <SCRIPT type=text/javascript>var cnt = document.getElementById(\'"+id+"\');
    var src = \'/sitefinity/wmvplayer.xaml\';var cfg = {file: \'"+url+"\'
    ,image: \'\',height: \'240\',width: \'440\'};var ply =
    new jeroenwijering.Player(cnt, src, cfg);<\/SCRIPT>";


    Any ideas?

    Thanks

    Petr
  6. Rumen
    Admin
    Rumen avatar
    14031 posts

    Posted 07 Jul 2011 Link to this post

    Hi Petr,

    Did you tried the suggested JavaScript code in my earlier post? You can see that it works fine on my end in the following video: http://screencast.com/t/bYf36iVp.

    For your convenience I have attached my project.

    Best regards,
    Rumen
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  7. Petr
    Petr avatar
    6 posts
    Member since:
    Jan 2011

    Posted 08 Jul 2011 Link to this post

    Hi Rumen,

    thanks, it works for me. But, if I put the same button into GenericContent.ascx into Sitefinity, it has same bug as I mentioned - script tags are omitted.

    Please, can you try do integrate this button in Sitefinity 3.7 as produce same screencast?

    Thanks

    Petr
  8. Rumen
    Admin
    Rumen avatar
    14031 posts

    Posted 11 Jul 2011 Link to this post

    Hi Petr,

    The problem is due to that you are using an older version of RadEditor where the problem exists. The only way to fix it is to upgrade the Telerik.Web.UI.dll to the latest one 2011.1.519 (Q1 2011 SP2). You can find information how to do that in the following KB article: How to upgrade RadControls.

    It is recommended to prepare a back up before the upgrade, so that you can downgrade if any new problems pop up.

    Kind regards,
    Rumen
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  9. Petr
    Petr avatar
    6 posts
    Member since:
    Jan 2011

    Posted 11 Jul 2011 Link to this post

    Hi Rumen,

    thanks, but I can't find <runtime> section in SF's 3.7 web.config. And second question: where can I download latest version of RadControls?

    Regards

    Petr
  10. Rumen
    Admin
    Rumen avatar
    14031 posts

    Posted 12 Jul 2011 Link to this post

    Hi Petr,

    The runtime section is part of the web.config file and is a child of the configuration section. You can find information about it in this MSDN article: http://msdn.microsoft.com/en-us/library/0kk0kk35.aspx

    I recorded and attached a video demonstrating the download link.

    Best wishes,
    Rumen
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  11. Petr
    Petr avatar
    6 posts
    Member since:
    Jan 2011

    Posted 17 Jul 2011 Link to this post

    Hi Rumen,

    thanks, but it still doesn't work. I've update controls to version 2011.2.712.40 (copy DLLs, made redirection in web.config. etc).
    The javascript code is still disabled by RadEditor, so there is no change.

    Please, let me know what to do - it's really critical for our project, because we can't use JW Player.

    Regards

    Petr
  12. Radoslav Georgiev
    Admin
    Radoslav Georgiev avatar
    19 posts

    Posted 21 Jul 2011 Link to this post

    Hi Petr,

    Can you please show us the markup of the ~/Sitefinity/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.ascx. I am using this markup and the suggested code from Rumen's post and there is no problem:
    <%@ Control Language="C#" %>
    <telerik:JsFileLink id="jsLink" runat="server" ScriptType="jQuery" />
     
    <div class="ctrlPropsGeneric">
     
    <input type="button" value="Paste Content" onclick="InsertSpan();return false;" />
    <script type="text/javascript">
        function InsertSpan() {
            var editor = $find("<%=textEditor.ClientID%>"); //get a reference to the editor
            editor.pasteHtml("<DIV id=mediaspace0 style=\"BACKGROUND-IMAGE:url(/sitefinity/admin/controltemplates/generic_content/player.jpg); WIDTH: 441px;HEIGHT: 235px\" name=\"mediaspace0\"></DIV><SCRIPT type=text/javascript>var cnt = document.getElementById(\'mediaspace0\');var src = '/sitefinity/wmvplayer.xaml';var cfg = {file: 'http://myurl',image: '',height: '240',width: '440'};var ply = new jeroenwijering.Player(cnt, src, cfg);<\/SCRIPT>");
        }
    </script>
    <telerik:RadEditor
        runat="server"
        ID="textEditor"
        ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"
        ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"   
        Skin="WebBlue"   
        NewLineBr="False"
        Height="360px"
        Width="98%"
        ContentFilters="EncodeScripts,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent">
        <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
        <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
        <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
        <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
        <CssFiles>
            <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />
        </CssFiles>
    </telerik:RadEditor>
         <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
    <!--
        Telerik.Web.UI.Editor.CommandList["LibraryImageManager"] = function(commandName, editor, args) {
            var editorArgs = editor.getSelectedElement();
            if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
                editorArgs = editor.getSelection();
     
            var myCallbackFunction = function(sender, args) {
                if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "IMG")
                    args.parentNode.replaceChild(editorArgs, args);
                else {
                    var cloned = args.cloneNode(true);
                    var div = args.ownerDocument.createElement("DIV");
                    div.appendChild(cloned);
                    editorArgs.pasteHtml(div.innerHTML);
                }
            }
            var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx") %>';
            editor.showExternalDialog(
       path,
       editorArgs,
       750,
       515,
       myCallbackFunction,
       null,
       'ImageLibraryDialog',
       true,
       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
       false,
       true)
        };
     
        Telerik.Web.UI.Editor.CommandList["LibraryDocumentManager"] = function(commandName, editor, args) {
            var editorArgs = editor.getSelectedElement();
            if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
                editorArgs = editor.getSelection();
     
            var myCallbackFunction = function(sender, args) {
                if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                    args.parentNode.replaceChild(editorArgs, args);
                else {
                    var cloned = args.cloneNode(true);
                    var div = args.ownerDocument.createElement("DIV");
                    div.appendChild(cloned);
                    editorArgs.pasteHtml(div.innerHTML);
                }
            }
            var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/DocumentEditorDialog.aspx") %>';
            editor.showExternalDialog(
       path,
       editorArgs,
       750,
       515,
       myCallbackFunction,
       null,
       'ImageLibraryDialog',
       false,
       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
       false,
       true)
        };
     
        Telerik.Web.UI.Editor.CommandList["LinkManager"] = function(commandName, editor, args) {
            var editorArgs = editor.getSelectedElement();
            if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A") {
                var sel = editor.getSelection();
                editorArgs = sel;
                editorArgs.Html = sel.getHtml();
                editorArgs.Text = sel.getText();
            }
     
            var myCallbackFunction = function(sender, args) {
                if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                    args.parentNode.replaceChild(editorArgs, args);
                else {
                    var cloned = args.cloneNode(true);
                    var div = args.ownerDocument.createElement("DIV");
                    div.appendChild(cloned);
                    editorArgs.pasteHtml(div.innerHTML);
                }
     
            }
            var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>';
            editor.showExternalDialog(
       path,
       editorArgs,
       750,
       515,
       myCallbackFunction,
       null,
       'ImageLibraryDialog',
       false,
       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
       false,
       true)
        };
     
        Telerik.Web.UI.Editor.CommandList["SetLinkProperties"] = function(commandName, editor, args) {
            var editorArgs = editor.getSelectedElement();
            if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
                editorArgs = editor.getSelection();
     
            var myCallbackFunction = function(sender, args) {
                if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                    args.parentNode.replaceChild(editorArgs, args);
                else {
                    var cloned = args.cloneNode(true);
                    var div = args.ownerDocument.createElement("DIV");
                    div.appendChild(cloned);
                    editorArgs.pasteHtml(div.innerHTML);
                }
     
            }
            var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>';
            editor.showExternalDialog(
       path,
       editorArgs,
       750,
       515,
       myCallbackFunction,
       null,
       'ImageLibraryDialog',
       false,
       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
       false,
       true)
        };
     
        RadEditorCommandList["IncreaseSize"] = function(commandName, editor, oTool) {
            var currentWidth = editor.get_element().style.width; //get the width of Telerik RadEditor
            var currentHeight = editor.get_element().style.height; //get the heigh of Telerik RadEditor
     
            editor.SetSize(currentWidth, currentHeight + 30); //set the height size of the editor to increase with 30px
        };
     
        RadEditorCommandList["DecreaseSize"] = function(commandName, editor, oTool) {
            var currentWidth = editor.get_element().style.width;
            var currentHeight = editor.get_element().style.height;
     
            editor.SetSize(currentWidth, currentHeight - 30); //set the height size of the editor to decrease with 30px
        };
        var oldFunction = Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"]; //save the original Paste function
     
        Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"] = function(commandName, editor, args) {
            oldFunction(commandName, editor, args);
            var bd = document.getElementsByTagName("body")[0];
     
            if (/fullScreenMode/.test(bd.className)) {
                var rep = bd.className.match(' ' + 'fullScreenMode') ? ' ' + 'fullScreenMode' : 'fullScreenMode';
                bd.className = bd.className.replace(rep, '');
     
            } else {
                bd.className += bd.className ? ' ' + 'fullScreenMode' : 'fullScreenMode';
            }
        }
    -->
            </script>
        </telerik:RadCodeBlock>
    </div>
    <div class="footLinks">
        <p id="warningConainer" runat="server">
            <asp:Literal ID="warning" runat="server"></asp:Literal>
            <asp:LinkButton ID="EditSharedContent" CommandName="shareContent" runat="server" style="float:none;border-left:0;display:inline;font-weight:bold;margin-left:5px;color:#333" />
        </p>
        <asp:LinkButton ID="ShareContent" CommandName="shareContent" runat="server" CssClass="share"></asp:LinkButton>
        <asp:LinkButton ID="SelectContent" CommandName="selectContent" runat="server" CssClass="select"></asp:LinkButton>
    </div>
     
    <script type="text/javascript">
     
         $(document).ready(function() {
         
            var windowDiffConst = 174;
            var textEditorWrapperDiffIEConst = -57;
             
            $(window).bind('load', function() {
                 
                $(".ToggleScreenMode").parent().hide();
                if($(".rwMaximizedWindow", parent.document.body).length > 0)
                {
                    var $textEditor = $("#<%= textEditor.ClientID %>");
                    var $textEditorWrapper = $textEditor.children().eq(1);
     
                    var editorDiff = $textEditor.height() - $textEditorWrapper.height();
                    var newHeight = $(window).height() - windowDiffConst;
                     
                    $(".ctrlPropsGeneric").eq(0).css("height",newHeight+"px");
                     
                    $textEditor.css("height",parseInt(newHeight-2)+"px");
                    $textEditorWrapper.css("height",parseInt(newHeight-4+editorDiff)+"px");
                }
            });
            if($.browser.msie && jQuery.browser.version == "6.0")
            {
                $(".RadWindow", parent.document.body).find(".rwMaximizeButton").hide();
            }
            else
            {
                var $textEditor = $("#<%= textEditor.ClientID %>");
                var $textEditorWrapper = $textEditor.children().eq(1);
                 
                var editorDiff = $textEditor.height() - $textEditorWrapper.height();
                 
                $(window).bind('resize', function() {
                    var newHeight = $(window).height() - windowDiffConst;
                    if($.browser.msie && (jQuery.browser.version == "7.0" || jQuery.browser.version == "8.0"))
                    {
                        editorDiff = textEditorWrapperDiffIEConst;
                    }
                    $(".ctrlPropsGeneric").eq(0).css({"height":newHeight+"px"});
                     
                    $textEditor.css({"height":parseInt(newHeight-2)+"px","min-width":"0","min-height":"0"});
                    $textEditorWrapper.css("height",parseInt(newHeight-4+editorDiff)+"px");
     
                });
            }
        });
         
    </script>

    You can observe the result in the attached video.


    Regards,
    Radoslav Georgiev
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top