Attention Cute Editor Staff :: PasteHTML

Last post 05-29-2009, 1:00 AM by Kenneth. 10 replies.
Sort Posts: Previous Next
  •  12-05-2005, 6:00 PM 13433

    Attention Cute Editor Staff :: PasteHTML

    Hi,
     
    On your demo of the Javascript API, the PasteHTML feature works great. I can hilight an image and click the insert HTML button and the image is replaced with the text. I can also select a point anywhere in the code and press the insert HTML button and it works fine. But when I installed it on my server and test it, it seems that the HTML is always being pasted at the very beggning of the code. Any idea why?
  •  12-05-2005, 9:59 PM 13440 in reply to 13433

    Re: PasteHTML

    podo,
     
    Is your site online or you can create a  sample aspx page which demonstrates the exact problem with more information?
     
     

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  12-11-2005, 12:58 PM 13695 in reply to 13440

    Re: PasteHTML

    I think the problem is that the PasteHTML function only responds correctly when the onclick event is attachd to a button, or an input. I am putting the onclick on a div....e.g.:   <div onclick="PasteHTML........
     
    You can see an example at:  http://www.templatemonsterdirect.com/dev/cetest.aspx

    First, click on the PASTE HTML grey bar above all the buttons, and notice that it only pastes the HTML at the begining of the editor....Then click the insert HTML button and notice that everything works fine.
     
  •  12-12-2005, 10:34 AM 13714 in reply to 13695

    Re: PasteHTML

    top
  •  12-12-2005, 12:27 PM 13727 in reply to 13714

    Re: PasteHTML

  •  12-12-2005, 2:13 PM 13743 in reply to 13727

    Re: PasteHTML

    podo,
     
    Please don't use the DIV tag. When you click the DIV, the focus will be removed from the editor. When pasting the HTML, the editor will get the focus again. So the HTML will be pasted at the beginning of the Editor content.
     
    Please try the following method:
     

          <INPUT type=button value="insert HTML" onclick="PasteHTML('This is a test!')"> 

          <Button onclick="PasteHTML('This is a test!')">insert HTML</button>
       
          <IMG  onclick="PasteHTML('This is a test!')" src="/images/button1.gif"> 

    Hope it helps.

    Let me know if you have any further questions.

     
     

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  12-12-2005, 3:33 PM 13751 in reply to 13743

    Re: PasteHTML

    Thanks Adam for your effort on this problem and the solutions you provided!
  •  01-26-2009, 3:37 PM 48073 in reply to 13743

    Re: PasteHTML

    I'm having a similar problem in that the editor loses focus during hyperlink insertion and then pastes the link in at the beginning of the editor window.  I am doing something different however.  I created a custom button that launches an ASP.Net AJAX modal popup control wherein I enter the display text and the URL.  I click a button on this modal popup and some more javascript takes the display text and URL, formats them into hyperlink markup, and then pastes them into the CuteSoft editor.  As I said however the editor loses focus during this process and thus pastes the hyperlink into the beginning of the editor window.
     
    Is there any way around this?  Is there some way that I can capture the cursor position in the editor before all this scripting occurs so that the cursor can be repositioned where it was just before the pasting of the hyperlink?
     
    It is worth mentioning that I can still see the cursor in the editor while the modal popup is visible and it is in the correct position.  The editor only seems to lose focus when I actually click on a button in the modal popup.
     
    Here is all the relevant VB.Net, JavaScript, and Markup:
     

    Here is how I create the custom button:

    Sub Page_Load()

    Dim ctrl As System.Web.UI.WebControls.WebControl

    ctrl = Editor1.CreateCommandButton("hyperlink", "link.gif", "Insert Link")

    ctrl.Attributes("onclick") = "LaunchInsertHyperlink(this)"

     

    Editor1.RegisterCustomButton("hyperlink", ctrl)

     

    End Sub

    Here is the javascript that is invoked when the custom toolbar button is clicked (it programmatically "clicks" a hidden button that launches the modal popup):

    function LaunchInsertHyperlink()

    {

    document.getElementById('ctl00$ContentPlaceHolder_Outer$LoginView1$imb_InsertHyperlink').click();

    }

    Here is the javascript used to assemble the hyperlink markup and paste it into the editor:

    function InsertHyperlink()

    {

    var editor1 = document.getElementById('CE_ctl00_ContentPlaceHolder_Outer_LoginView1_Editor1_ID');

     

    editor1.FocusDocument();

     

    var DisplayText = document.getElementById('ctl00$ContentPlaceHolder_Outer$LoginView1$txtInsertHyperlinkDisplayText').value;

    var DisplayURL = document.getElementById('ctl00$ContentPlaceHolder_Outer$LoginView1$txtInsertHyperlinkURL').value;

    var HyperLinkMarkUp = '<a href=\"' + DisplayURL + '\" target="_blank" >' + DisplayText + '</a>';

     

    editor1.ExecCommand('PasteHTML',false,HyperLinkMarkUp);

     

    var editortoolbar = document.getElementById('CE_ctl00_ContentPlaceHolder_Outer_LoginView1_Editor1_ID_CodeViewToolBar');

     

    }

     

    Here is a portion of the markup in my page...it contains the editor and the buttons, extenders, panels, etc. needed to represent the modal popup and the buttons in it (note that the "btnInsertHyperlink" button in panel control invokes the javascript function "InsertHyperlink" as shown above...also note that all the markup below is nested within other DIV blocks for positioning):

     

    <asp:LoginView

    ID="LoginView1"

    runat="server">

     

    <LoggedInTemplate>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

    <ContentTemplate>

     

    <asp:UpdatePanel ID="UpdatePanel2" runat="server">

    <ContentTemplate>

    <div

    style="

    overflow: hidden;

    width: 780px;

    height: 500px;

    text-align: left;">

    <CE:Editor id="Editor1" runat="server" ConfigurationPath="~/CuteSoft_Client/CuteEditor/Configuration/My_Posts_Compose.config" TemplateItemList="[Print,netspell,separator,Cut,Copy,Paste,hyperlink,Delete,Undo,Redo,separator,Bold,Italic,Underline,JustifyLeft,JustifyCenter,separator,ImageGalleryByBrowsing][fontname,fontsize,zoom]" EditorBodyStyle="font-family: Arial; font-size: 10pt; " AllowPasteHtml="false" Width="780px" Height="500px" MaxTextLength="15000" >

    <FrameStyle BackColor="White" BorderColor="#DDDDDD" BorderStyle="Solid" BorderWidth="1px" CssClass="CuteEditorFrame" Height="100%" Width="100%" />

    </CE:Editor>

    </div>

     

     

     

    <asp:ImageButton

    ID="imb_InsertHyperlink"

    Visible="true"

    ImageUrl="~/images/1x1_Transparent.gif"

    runat="server" />

    <ajaxToolkit:ModalPopupExtender

    ID="mpe_InsertHyperlink"

    runat="server"

    PopupControlID="pnlModalPopup_InsertHyperlink"

    CancelControlID="btnCancel_InsertHyperlink"

    BackgroundCssClass="modalBackground"

    TargetControlID="imb_InsertHyperlink"

    DropShadow="false" />

    <asp:Panel

    ID="pnlModalPopup_InsertHyperlink"

    runat="server"

    Style="

    z-index: 1000;

    display: none"

    Width="345px">

     

    <div

    style="

    display: inline;

    float: left;

    background-image: url(Images/ModalPopupTemplate_h189_Lft.png);

    background-repeat: no-repeat;

    width: 20px;

    height: 189px;

    text-align: center;

    overflow: hidden; "></div>

     

    <div

    style="

    display: inline;

    float: left;

    background-image: url(Images/ModalPopupTemplate_h189_x.png);

    background-repeat: repeat-x;

    width: 260px;

    height: 154px;

    padding-top: 15px;

    padding-left: 20px;

    padding-right: 20px;

    padding-bottom: 20px;

    text-align: left;

    overflow: hidden; ">

     

    <div style="width: 260px;">

    <asp:Label

    ID="lbl_InsertHyperlink"

    runat="server"

    style="

    text-align: left;

    text-shadow: 0px 1px 1px #000;

    font-weight: bold;

    font-size: 16px;

    color: #ffffff;

    font-family: Arial;"

    Text="Insert Hyperlink" />

     

    </div>

    <div style="width: 260px; padding-top: 0px; ">

    <asp:HyperLink

    ID="Label1"

    runat="server"

    style="

    text-align: left;

    text-shadow: 0px 1px 1px #000;

    font-weight: normal;

    font-size: 12px;

    color: #ffffff;

    font-family: Arial;"

    Text="Display Text: "></asp:HyperLink>

    </div>

    <div style="width: 260px; padding-top: 0px; ">

    <asp:TextBox

    ID="txtInsertHyperlinkDisplayText"

    runat="server"

    cssclass="TextBox_Standard"

    style="display: inline; float: left; width: 255px;"></asp:TextBox>

    </div>

    <div style="width: 260px; padding-top: 5px; ">

    <asp:HyperLink

    ID="Label2"

    runat="server"

    style="

    text-align: left;

    text-shadow: 0px 1px 1px #000;

    font-weight: normal;

    font-size: 12px;

    color: #ffffff;

    font-family: Arial;"

    Text="URL :" ></asp:HyperLink

    </div>

    <div style="width: 260px; padding-top: 0px; ">

    <asp:TextBox

    ID="txtInsertHyperlinkURL"

    runat="server"

    cssclass="TextBox_Standard"

    Text="http://"

    style="display: inline; float: left; width: 255px;" />

    </div>

    <div style="text-align: right; margin-top: 10px; padding-left: 11px; overflow: hidden; ">

     

    <asp:Button

    ID="btnInsertHyperlink"

    Text="Insert"

    style="width: 115px; "

    runat="server" OnclientClick="InsertHyperlink(this)" />

     

    <asp:Button

    ID="btnCancel_InsertHyperlink"

    Text="Cancel"

    style="width: 115px; margin-left: 5px;"

    runat="server" />

    </div>

     

    </div>

     

    <div

    style="

    display: inline;

    float: left;

    background-image: url(Images/ModalPopupTemplate_h189_Rt.png);

    background-repeat: no-repeat;

    width: 25px;

    height: 189px;

    text-align: center;

    overflow: hidden; "></div>

    </asp:Panel>

     

    </ContentTemplate>

    </asp:UpdatePanel>

     

    </LoggedInTemplate>

    </asp:LoginView>

  •  04-08-2009, 8:03 AM 50877 in reply to 13433

    Re: Attention Cute Editor Staff :: PasteHTML

    i also have a similar problem..
     
    i have created a custom button onclick of which i open a PopUp DIV ...
    on that PopUp Div i have a button.
    onclick of that button i call the pasteHTML function .. and the popup div is closed.
    on mozilla and chrome the html gets paste where the cursor position was...
    but in IE  it gets pasted at the start of the editor.
    why is it so?
     
    is there a solution for IE?
  •  04-08-2009, 1:01 PM 50889 in reply to 50877

    Re: Attention Cute Editor Staff :: PasteHTML

    Please make sure you are using the latest build.
     
    Demo:
     
    Add a Cross Browser Modal Dialog Box to Cute Editor

    How to create a custom button(client side) which displays a dialog?( C# | VB )

    This example demonstrates how easy it can be to add your own client side buttons to the CuteEditor by creating a Cross Browser Modal Dialog Box.


    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  05-29-2009, 1:00 AM 52621 in reply to 48073

    Re: PasteHTML

    Hi,
     
    Try this example
     
    1. <%@ Page Language="VB" %>   
    2.   
    3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>   
    4. <%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>   
    5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    6. <html xmlns="http://www.w3.org/1999/xhtml">   
    7. <head id="Head1" runat="server">   
    8.     <title>test</title>   
    9. </head>   
    10.   
    11. <script type="text/javascript">   
    12. function insertLink()   
    13. {   
    14. var editor1 = document.getElementById('<%= Editor1.ClientID%>');   
    15. var tex1=document.getElementById("<%= textBox1.ClientID %>").value;   
    16. var tex2=document.getElementById("<%= textBox2.ClientID %>").value;   
    17. var HyperLinkMarkUp = '<a href=\"' + tex1 + '\" target="_blank" >' + tex2 + '</a>';   
    18. editor1.PasteHTML(HyperLinkMarkUp);   
    19. editor1.FocusDocument();    
    20. }   
    21. </script>   
    22.   
    23. <body>   
    24.     <form id="form1" runat="server">   
    25.     <asp:ScriptManager ID="ScriptManager1" runat="server">   
    26.     </asp:ScriptManager>   
    27.     <asp:UpdatePanel ID="UpdatePanel1" runat="server">   
    28.         <ContentTemplate>   
    29.             <CE:Editor ID="Editor1" runat="server">   
    30.             </CE:Editor>   
    31.             <asp:Button ID="button1" runat="server" Text="InsertLink" />   
    32.             <asp:Panel ID="panel1" runat="server" BackColor="Red" Width="300px" Height="100px"  
    33.                 Style="padding-left: 80px; padding-top: 40px">   
    34.                 <asp:TextBox ID="textBox1" runat="server"></asp:TextBox>   
    35.                 <asp:TextBox ID="textBox2" runat="server"></asp:TextBox><br />   
    36.                 <input type="button" id="btn_insert" onclick="insertLink()" value="Insert" />   
    37.             </asp:Panel>   
    38.             <ajaxtoolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="button1"  
    39.                 OkControlID="btn_insert" PopupControlID="panel1">   
    40.             </ajaxtoolkit:ModalPopupExtender>   
    41.         </ContentTemplate>   
    42.     </asp:UpdatePanel>   
    43.     </form>   
    44. </body>   
    45. </html>  

     
    Regards,
     
    Ken
View as RSS news feed in XML