Rad Editor - Inser Text between two word from javascript.

[Dipsa Shah]

Hi

I have one Editor.aspx page which contains Rad Editor and Button. I write some text in editor (ex: Text will come here) and put the cursor some where in between ("come" and "here").
Now I click on Button which will open Popup contains Images. I will select Image from popup and will close pop up. once I close popup my original page Editor.aspx will get refreshed again and will call onClientLoad function of editor again.

Now on that page I still get my corsor position in number (ex: 14 as per above case). but I want to know how can I insert text/html at position 14. ?

It can add first image correctly. But when I am trying to add another image in same editor using same process mentioned above , it breakes my existing image code and thats why I am not getting my previous image.

Do you have any inbuild function for editor, so I can pass possition and add text/html at that position.
my code :

 

<telerik:RadEditor ID="RadEditor1" runat="server" Height="600px" ImageManager-EnableImageEditor="false" 
 AllowScripts="true" OnClientLoad="InsertText"></telerik:RadEditor>
<asp:Button ID="Button1" runat="server" Text="Image Gallery AJAX" OnClick="Button1_Click"/>
< script type="text/javascript">
 function InsertText()
 {
var intCPos = GetCursorPosition();
 if (intCPos != 0)
 {

     document.getElementById('hfCPOS').value = intCPos;
}

if(document.getElementById('myValue').value != "")
{
var pos = document.getElementById('hfCPOS').value; //gives 14
 var editorr = $find("<%=RadEditor1.ClientID%>"); //get a reference to the editor
 var strIMG = document.getElementById('myValue').value; // myvalue = <img id='123' src='123.gif' alt=''/>
 var strValue = editorr.get_html(true);
 strValue = strValue.substring(0,pos)+ strIMG + strValue.substring(pos)
//editorr.pasteHtml(strValue);
 
editorr.set_html(strValue);
 document.getElementById('myValue).value = "";
 document.getElementById('hfCPOS').value = "";
 }

}
 </script>

o/p (after adding 1st image)
Text Will Come<img alt="" id="parts_coupon_01.jpg" src="http://192.168.3.27:88/Files/Images/2/gallery/Coupons//parts_coupon_01.jpg" runat="server" /> Here.

o/p (after adding 2nd image)
now my cursor is between "Text Will Come Here " - 'e' and 'r' of Here
Text Will Come<im<img id="service_coupon_02.jpg" runat="server" src="http://192.168.3.27:88/Files/Images/2/gallery/Coupons//service_coupon_02.jpg" />g alt="" id="parts_coupon_01.jpg" src="http://192.168.3.27:88/Files/Images/2/gallery/Coupons//parts_coupon_01.jpg" runat="server" /&gt; Here.

it breaks my code. need help!!!!!!

thanks
DIpsa

 

 

 

 

 

 

[Rumen]

Hi Dipsa,

I am not sure why do you need to postback the page when you close the dialog? I would suggest implementing a custom RadEditor dialog like the Emoticons dialog that will insert the image on the desired cursor position in the content area. The custom dialogs have a built-in function for remaining and restoring the selection in the content area. The custom dialogs use built-in the methods described in this article: getRange.

If you are unable to achieve the requested functionality with RadEditor then the best way is to implement it as a separate solution using an editable DIV element

<div contenteditable="true" style="1px solid red;width:300px;height:300px;">sample content</div>

and  using Text Ranges. Here are more articles providing information about the range selection:
http://www.quirksmode.org/dom/range_intro.html
and
http://www.wrox.com/WileyCDA/Section/JavaScript-DOM-Ranges-Page-2.id-292302.html

When you are ready with the implementation of your custom Indent and Outdent features send us the code and we will integrate it in RadEditor.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.