This is a migrated thread and some comments may be shown as answers.

pasteHtml After Node at Cursor Position?

16 Answers 502 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Jeff asked on 29 Apr 2009, 01:00 AM

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

16 Answers, 1 is accepted

answered on 01 May 2009, 03:11 PM

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.

answered on 01 May 2009, 08:24 PM

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.

answered on 06 Jan 2020, 03:17 PM

Hi Deepa,

Can you provide a snippet of your code to see how you are doing the pasting as well as the token snippet?

You can see how to control the cursor position and the focus in the following online resources:

https://www.telerik.com/forums/how-to-paste-inseret-the-text-at-cursor-position-in-radeditor#8VFWGUxTJkSskEtbLr3s7g
https://www.telerik.com/support/kb/aspnet-ajax/editor/details/begin-typing-without-the-styles-from-newly-inserted-formatting-by-the-pastehtml-method-to-be-applied-to-user-input-text

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 09 Jan 2020, 10:33 AM

Hi Deepa,

Thank you for sharing the snippet!

The reported behavior is due to the following lines of code

editor.setFocus(); //this method set the focus in the content area which erases the selection.
var doc = editor.get_document();
doc.execCommand("SelectAll", null, false); //this method selects the whole content which again erases the selection
editor.getSelection().collapse(); //collapse the selection to the end of the content area

If you comment out those lines, the cursor will go directly after the inserted token, but not at the end of the whole content.

Best Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.