Support forums - hrefs with javascript calls seem to interfere with Cute Editor

Support forums » Products » Cute Editor for .NET » Re: hrefs with javascript calls seem to interfere with Cute Editor

hrefs with javascript calls seem to interfere with Cute Editor

Last post 04-20-2006, 4:16 PM by Davis. 2 replies.


	Sort Posts: Previous Next

04-13-2006, 11:38 AM 18205

Davis
Joined on 04-13-2006
Posts 3

hrefs with javascript calls seem to interfere with Cute Editor

Reply Quote

I've recently run into an unusual behavior with the cute editor.

I created an .aspx in VS2005 that contained a fairly basic editor with a databind and one other link containing an arbitrary "BLOCKED SCRIPT[function-call]" style href.

If I
A) 1: Enter data in the editor, 2: click the arbitrary link, and 3: submit the form -- the data in the editor is sent normally through the Request.Form object (the form post).
However, if I
B) 1: Click the arbitrary link, 2: enter data in the editor, and 3: submit the form -- the data in the editor is completely missing from the the Request.Form object (the form post).

I searched but did not find this mentioned in the forums. Can anyone give me any advice on defeating this? (Obviously, never using href="BLOCKED SCRIPT..." will prevent the problem, but we use other components which often create such hrefs, so just dodging the issue isn't really an option.)

Thanks.

Here is an aspx that should reproduce the error:
The related aspx.cs (the codebehind) is empty -- all code is inline in the example below.
This is VS2005, in the .Net 2.0 framework, but the problem seems to be a client-side JS scoping issue.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testCE2.aspx.cs" Inherits="testCE2" %>
<%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>
<%@ Register Assembly="CuteEditor.ImageEditor" Namespace="CuteEditor.ImageEditor" TagPrefix="iws" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Cute Editor vs. BLOCKED SCRIPT e.g. page</title>
</head>
<body>
    <%
        if (Page.IsPostBack)
        {
            Response.Write("<big>Postback detected. Value found in form post is: " + Request.Form["editEventDetailsEdit"].ToString() + "<br /></big>");
            editEventDetailsEdit.Text = "";
        }
     %>
    <form id="form1" runat="server">
    <p>
    Here is the example. To see normal operation, type some text in the editor and click the submit button. If you click the "ruin everything" link, be sure to do so <i>after</i> using the editor.
    </p>
    <p>
    To see the bad behavior, <i>first</i> click the "ruin everything" link, then type some text in the editor and click the submit button. The info will be lost from the form post.
    </p>
    <div>
    <a id="linkToRuin" href="BLOCKED SCRIPTalert('Okay, thanks to the BLOCKED SCRIPT... href, editor use hereafter is unlikely to show in the form post.');">ruin everything</a><br />
    <br />
       <CE:Editor ID="editEventDetailsEdit" runat="server" Height="100px" Text='<%# Bind("Details") %>'
        Width="95%" TemplateItemList="ToFullpage,FromFullPage,Bold,Italic,Underline,JustifyLeft,JustifyCenter,JustifyRight" >
        <FrameStyle BackColor="White" BorderColor="#DDDDDD" BorderStyle="Solid" BorderWidth="1px"
        CssClass="CuteEditorFrame" Height="100%" Width="100%" />
        </CE:Editor>
        <br />
        <input type="submit" value="basic submit button" />
    </div>
    </form>
</body>
</html>

04-13-2006, 11:48 AM 18206 in reply to 18205

Davis
Joined on 04-13-2006
Posts 3

Re: hrefs with javascript calls seem to interfere with Cute Editor

Reply Quote

Unfortunately this post, as-is, will not run. The "BLOCKED SCRIPT" areas are all calls to j-a-v-a-s-c-r-i-p-t-:. (Those in the hrefs are followed by a colon:)

Anyone testing this page will have to make those substitutions within the code for it to work.

Thanks again.

04-20-2006, 4:16 PM 18398 in reply to 18206

Davis
Joined on 04-13-2006
Posts 3

Re: hrefs with javascript calls seem to interfere with Cute Editor

Reply Quote

Well, I hacked out a solution. This is almost certainly overkill, so I'd appreciate it if anyone has a better solution. In our case, we have links like ...href=jav ascr ipt: doSomething() in the page. These seem to break the Cute Editor if clicked before the Editor is used (see explanation in my previous post). Worse, our pages spawn popup controls that are full of more such links.

My way out of it was to call the following scripts in the onload event of the body tag, e.g.
...body onload="hideScriptedHrefs(getAllElements());"

This drags through the document.all (we tried getElementsByTagName("a") -- it didn't find everything) and replaces every jav ascr ipt href with an onclick that does the same thing. These new onclicks then also call the same function a second time (this was how we dealt with the popup control links, which only appear after the first click).

If no one else has a better solution, I hope at least that this helps someone. (PLEASE NOTE: i've had to create a few syntax errors (e.g. spelling the language "jav ascr ipt") to prevent the code from getting too marked up during post.)

    //use as a generic way to get a collection of all document elements
    function getAllElements(){
        //firefox seems to muddle through document.all as of version 1.5
        return document.all;
    }

    //use to disable jav ascr ipt:[function] style hrefs, while still preserving their behavior
    //this prevents loss of jav ascr ipt scope, but still executes the href scr ipt
    //(loss of jav ascr ipt scope seems to damage the CuteEditor)
    function hideScriptedHrefs(arr){
        var re = new RegExp(("jav" + "ascr" + "ipt:"),"gi");
        for (var i = 0; i < arr.length; i++){
            var el = arr[ i ];
            if (el.getAttribute('href') != null && el.getAttribute('href').match(re)){
                el.setAttribute('formerHref',el.getAttribute('href'));
                el.setAttribute('formerOnClick',el.getAttribute('onclick'));
                el.href = "#";
                el.onclick = function(){
                                if (this.getAttribute('formerOnClick') != null) this.getAttribute('formerOnClick').call(this);
                                if (this.getAttribute('formerHref') != null) eval(unescape(this.getAttribute('formerHref').replace(re,'')));
                                hideScriptedHrefs(getAllElements()); /*only needed if new links might appear */
                                return false;
                                };
            }
        }
    }