pasteHtml After Node at Cursor Position?

[Jeff]

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

[Rumen]

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.

[Jeff]

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.

[peter]

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?

[Rumen]

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

[peter]

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.

[peter]

Let me know if there is any alternate method to paste content which moves cursor(in chrome).
Thanks in advance

[Rumen]

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

[peter]

Thanks Rumen.

[peter]

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

[Rumen]

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

[peter]

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

[Rumen]

Hello Peter,

I just answered your support ticket.

Best regards,
Rumen
the Telerik team

[Deepa]

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?

[Rumen]

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

[Deepa]

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

[Rumen]

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