This is a migrated thread and some comments may be shown as answers.
pasteHtml After Node at Cursor Position?
16 Answers 241 Views
This is a migrated thread and some comments may be shown as answers.
Jeff
Top achievements
Rank 1
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

Sort by
0
Rumen
Telerik team
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.
0
Jeff
Top achievements
Rank 1
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.
0
peter
Top achievements
Rank 1
answered on 02 Oct 2012, 05:57 PM
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?
0
Rumen
Telerik team
answered on 03 Oct 2012, 07:46 AM
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.
0
peter
Top achievements
Rank 1
answered on 03 Oct 2012, 01:12 PM
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.

0
peter
Top achievements
Rank 1
answered on 03 Oct 2012, 06:50 PM
Let me know if there is any alternate method to paste content which moves cursor(in chrome).
Thanks in advance
0
Rumen
Telerik team
answered on 08 Oct 2012, 10:01 AM
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.
0
peter
Top achievements
Rank 1
answered on 08 Oct 2012, 01:49 PM
Thanks Rumen.
0
peter
Top achievements
Rank 1
answered on 19 Oct 2012, 05:54 PM
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
0
Rumen
Telerik team
answered on 24 Oct 2012, 07:46 AM
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.
0
peter
Top achievements
Rank 1
answered on 24 Oct 2012, 01:47 PM
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
0
Rumen
Telerik team
answered on 26 Oct 2012, 04:11 PM
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.
0
Deepa
Top achievements
Rank 1
answered on 06 Jan 2020, 06:15 AM
Actually its not a reply but a query in similar type. I too using Radeditor in my application. On a button click I am pasting token in editor. When there is already some text present after inserting tokens, cursor moves to end of the editor text. But I want it should remain at the end of token. What should I do to achieve this?
0
Rumen
Telerik team
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.
0
Deepa
Top achievements
Rank 1
answered on 07 Jan 2020, 04:37 AM

Hi Rumen,

Below is my code snippet.

if (selectedText == "") {
editor.pasteHtml(stringToInsert);
editor.setFocus();
var doc = editor.get_document();
doc.execCommand("SelectAll", null, false);
editor.getSelection().collapse();
}

and tokens are in the form of [ABC],[XYZ] like this.

I will go through the online resource links given by you.

Regards,

Deepa

0
Rumen
Telerik team
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.
Asked by
Jeff
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Jeff
Top achievements
Rank 1
peter
Top achievements
Rank 1
Deepa
Top achievements
Rank 1
Share this question
or