Inserting java script using pasteHtml method

[Petr]

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

[Rumen]

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

[Petr]

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

[Rumen]

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

[Petr]

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

[Rumen]

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

[Petr]

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

[Rumen]

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

[Petr]

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

[Rumen]

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

[Petr]

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

[Radoslav Georgiev]

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