Support forums - PasteHTML doesnt work within a modal popup (example page attached)

Support forums » Products » Cute Editor for .NET » Re: PasteHTML doesnt work within a modal popup (example page attached)

PasteHTML doesnt work within a modal popup (example page attached)

Last post 07-15-2010, 10:42 PM by mreric. 1 replies.


	Sort Posts: Previous Next

07-15-2010, 2:43 PM 62519

mreric
Joined on 02-23-2010
Posts 28

PasteHTML doesnt work within a modal popup (example page attached)

Reply Quote

Hello there,

I'm evaluating and all seems well but I'm having an issue with a requirement I have.

I have a modal popup with the editor inside. I have a button that inserts some text at the cursor location and postsback. I can see that the text is inserted but the data that goes to the server does not include the inserted text. The odd thing is, i put an alert right after the PasteHTML() and it works? I had problems uploading my text case so it's shown below. Any help would be appreciated.

Thanks!!

-------------------------------------------------------------------------------------

<%@ Page Language="VB" ValidateRequest="false" %>
<%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

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

<script runat="server">

    Protected Sub InsertText_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        txtResult.Text = editor.Text
    End Sub

    Protected Sub InsertText2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        txtResult.Text = editor.Text
    End Sub

    Protected Sub btnShowPopUp_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ModalPopupExtender_pnlModalPop.Show()
    End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>

    <style type="text/css">
    .modalBackground {background-color:Gray;filter:alpha(opacity=70);opacity:0.7;}
    </style>
</head>

<script language="javascript">

function insertMe(textToInsert) {

    //get editor
    var editor1 = document.getElementById('<%= editor.ClientID %>');

    //paste replace text in editor
    editor1.PasteHTML(textToInsert);
}

function insertMe2(textToInsert) {

    //get editor
    var editor1 = document.getElementById('<%= editor.ClientID %>');

    //paste replace text in editor
    editor1.PasteHTML(textToInsert);

    //alert
    alert("text inserted");
}

</script>

<body>
    <form id="form1" runat="server">

            <ajax:ToolkitScriptManager
        ID="ToolkitScriptManager"
        runat="server"
        AsyncPostBackTimeOut="360000"
        EnablePartialRendering="true"
        LOADSCRIPTSBEFOREUI=false
        ScriptMode=Release
        EnablePageMethods=true />

    <div>

    <asp:Button ID="btnShowPopUp" runat="server" OnClick="btnShowPopUp_Click" Text="popup" /><br />

<asp:Panel ID="pnlModalPop" runat="server" BackColor="GhostWhite" CssClass="modalPopup"
                                    Height="500px" HorizontalAlign="Center" Style="display: none" Width="600px">
                                    <asp:UpdatePanel ID="UpdatePanel_ModalPopUp" runat="server" UpdateMode="Conditional">
                                        <ContentTemplate>

    <CE:Editor id="editor" runat="server" Visible=true UseStandardDialog=true Width="100%" />
        <br />
        <asp:Button ID="InsertText" runat="server" Text="Insert Text" OnClientClick="BLOCKED SCRIPTinsertMe('This is Inserted Text'); return true;" OnClick="InsertText_Click" />
        <asp:Button ID="InsertText2" runat="server" Text="Insert Text (with alert after)" OnClientClick="BLOCKED SCRIPTinsertMe2('This is Inserted Text'); return true;" OnClick="InsertText2_Click" />
        <br />
        <br />
        <asp:Label ID="txtResult" runat="server" Text="Editor text after postback displays here" BorderWidth="1px" BorderStyle="Solid"></asp:Label>

                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </asp:Panel>



                                <div style="display: none">
                                    <asp:Button ID="btnModalPop" runat="server" CssClass="button" />
                                </div>
                                <ajax:ModalPopupExtender ID="ModalPopupExtender_pnlModalPop"

                                    runat="server"
                                    BackgroundCssClass="modalBackground"
                                    Enabled="True"
                                    PopupControlID="pnlModalPop"
                                    TargetControlID="btnModalPop" >
                                </ajax:ModalPopupExtender>

    </form>
</body>
</html>

07-15-2010, 10:42 PM 62526 in reply to 62519

mreric
Joined on 02-23-2010
Posts 28

Re: PasteHTML doesnt work within a modal popup (example page attached)

Reply Quote

Reading another post I found that it looks like the text is being saved only onblur with the editor .. unless it's called, it wont save to a hidden field. So with that said, I found a killfocus function that does the trick that forces the focus to be removed. The new code looks like this.

function insertMe(textToInsert) {

    //get editor
    var editor1 = document.getElementById('<%= editor.ClientID %>');

    //paste replace text in editor
    editor1.PasteHTML(textToInsert);

//kill the focus

killFocus(editor1);

}

function killFocus(refElement)
{
    var input = refElement.ownerDocument.createElement("input");
    input.type = "text";
    refElement.parentNode.appendChild(input);
    input.focus();
    input.parentNode.removeChild(input);
};