pasteHtml After Node at Cursor Position?

13 posts, 0 answers
  1. Jeff
    Jeff avatar
    51 posts
    Member since:
    Aug 2007

    Posted 28 Apr 2009 Link to this post

    Picking up from the previous thread, what I'm trying to do is insert a chunk of HTML just beyond the closing tag where the cursor is sitting.

    Consider the following sample:
    Telerik.Web.UI.Editor.CommandList["Sidebox"] = function(commandName, editor, args) 
         editor.pasteHtml("<div style='float: right; height: 100px; witdth: 100px; background-color: red; color: yellow'>A box on the right</div>"); 
         return
     




    Assuming your cursor is sitting between an opening and closing <p> tag when the command is invoked, the HTML is also pasted between the p tags. What I would like is to have it paste just after the closing </p>.

    Any advice on how to achieve this?

    Thanks,
    Jeff
  2. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 01 May 2009 Link to this post

    Hello Jeff,

    Please, try and experiment with the following code:

     var elem = editor.getSelectedElement(); //must be P if cursor is inside P
    editor.selectElement(elem);
    //Collapse the selection to the end
    editor.getSelection().collapse();
    //in IE only - move the selection one character forward to get out of the P
    var range = editor.getSelection().getRange();
    //if the browser is IE
    if ($telerik.isIE)
    {
       range.moveStart("character", 1);
       range.select();
    }

    Greetings,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jeff
    Jeff avatar
    51 posts
    Member since:
    Aug 2007

    Posted 01 May 2009 Link to this post

    Thanks for the code. However, it looks like I solved the issue using the DOM API.

    Here's the code. It still needs some work but if your cursor is in a <p> tag and there is at least on more tag following the <p>, it does the trick. I tested it in the latest versions of Firefox, Chrome, Safari and IE8.
    Telerik.Web.UI.Editor.CommandList["InsertDiv"] = function(commandName, editor, args) 
        var editorArgs = editor.getSelectedElement(); 
        var div = document.createElement("DIV"); 
        RadEditor.get_document().body.insertBefore(div, editorArgs.nextSibling); 
        return
     




    Obviously, it doesn't work for inserting HTML as raw text. You need to add your HTML as DOM elements. But that works just as well for me.

    The code didn't seem to work on IE7 so I upgraded to IE8 to get the JavaScript debugger. The code worked on IE8 so now it's going to be a challenge to test it on IE7 again.
  5. peter
    peter avatar
    7 posts
    Member since:
    Oct 2012

    Posted 02 Oct 2012 Link to this post

    Hi Rumen,
    var elem = editor.getSelectedElement();
    editor.selectElement(elem);
    editor.getSelection().collapse();
    The above code selects all text in the editor and then collapses to end.This places cursor at the end.
    But, I want to select only till the cursor position and collapse so that after doing editor.pasteHtml i can move cursor position.
    Is there any simple way to do this?
  6. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 03 Oct 2012 Link to this post

    Hi,

    Could you please explain your scenario in more details? The pasteHtml method places the cursor directly after the pasted word/content. How do you want to customize this method?


    Greetings,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. peter
    peter avatar
    7 posts
    Member since:
    Oct 2012

    Posted 03 Oct 2012 Link to this post

    I am sorry this happens only in chrome.
    pasteHtml method doesn't move the cursor in chrome. But, works fine in IE and firefox.
    Is there anyway to manually move the cursor in chrome after pasteHtml?

    You can check it here:

    http://demos.telerik.com/aspnet-ajax/editor/examples/default/defaultcs.aspx

    try Paste Options tool in both firefox/IE and chrome.
    Unfortunately, we concentrate only on Chrome.

  8. peter
    peter avatar
    7 posts
    Member since:
    Oct 2012

    Posted 03 Oct 2012 Link to this post

    Let me know if there is any alternate method to paste content which moves cursor(in chrome).
    Thanks in advance
  9. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 08 Oct 2012 Link to this post

    Hello,

    I have good news that the pasteHtml issue in Chrome was fixed in the source code of RadEditor. The issue will not exist in the upcoming Q3 2012 release of RadControls for ASP.NET AJAX, scheduled for next week.

    Best regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. peter
    peter avatar
    7 posts
    Member since:
    Oct 2012

    Posted 08 Oct 2012 Link to this post

    Thanks Rumen.
  11. peter
    peter avatar
    7 posts
    Member since:
    Oct 2012

    Posted 19 Oct 2012 Link to this post

    Hi Rumen,
    I saw that the PasteHtml issue got fixed in Q3 release and works great.
    But, if i upgrade to this latest version lot of things break in my application.
    Is there anyway to apply this pasteHtml fix to my current version of telerik 2012.2.724.35.
    You help on this issue is appreciated.
    thanks,
    peter
  12. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 24 Oct 2012 Link to this post

    Hello Peter,

    I could provide a solution for 2012.2.724.35, but since it uses internal API I could share it with you only if you open a support ticket.

    All the best,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  13. peter
    peter avatar
    7 posts
    Member since:
    Oct 2012

    Posted 24 Oct 2012 Link to this post

    That's great Rumen.
    Here is the link for the support ticket i opened.
    http://www.telerik.com/account/support-tickets/view-ticket.aspx?threadid=621765

    Thanks,
    Peter
  14. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 26 Oct 2012 Link to this post

    Hello Peter,

    I just answered your support ticket.

    Best regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017