How to paste / inseret the text at cursor position in RadEditor ???

24 posts, 0 answers
  1. satish more
    satish more avatar
    8 posts
    Member since:
    Jan 2010

    Posted 05 May 2010 Link to this post

    Hi All ,

         i am using the RadEditor on a web page & i wan insert the text in rad editor at cursor position through the code behind file.
    plz give me solution for this.

    Regards,
    Satish

  2. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 05 May 2010 Link to this post

    Hi Satish,

    The selection and cursor position is a client-side object and it cannot be manipulated from the server. You can set the cursor position only on the client. You can paste at cursor position using the pasteHtml client-side method.

    If you would like to manipulate the cursor / caret position in the editor's content area, then my recommendation is to implement your scenario with an editable IFRAME (the content area of RadEditor is an editable IFRAME) or editable DIV, using the Range object. Information regarding TextRange is available in these articles:
    http://www.wrox.com/WileyCDA/Section/JavaScript-DOM-Ranges-Page-2.id-292302.html
    http://www.quirksmode.org/dom/range_intro.html
    http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx

    If you succeed and implement it, send us the code and we will replace the IFRAME with RadEditor and integrate the code to work with the editor control.

    All the best,
    Rumen
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. satish more
    satish more avatar
    8 posts
    Member since:
    Jan 2010

    Posted 05 May 2010 Link to this post

    Hi Rumen ,

            i am not able to do this using the editable IFRAME is there any other way to insert text @ cursor position from code behind ..

    Regards,
    Satish
  5. rebtech
    rebtech avatar
    29 posts
    Member since:
    Jun 2007

    Posted 21 Jul 2010 Link to this post

    i am trying the demo at http://www.telerik.com/help/aspnet-ajax/editor_pastehtml.html to pastHTMl at the cursor and it is not working. is there something else i have to do to get this to work?

    thanks
  6. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 26 Jul 2010 Link to this post

    Hi Ron,

    I tested the code of the example that you are referring to and it is working as expected. Could you please provide more detailed information regarding the specific scenario?
    • What version of RadControls and .NET Framework are used in the application?
    • Under which browser and its version the problem occurs?
    • Could you please open a support ticket and provide a sample runnable project that demonstrates the issue so we can investigate it further?

    I have prepared a video that demonstrates my test.

    Kind regards,
    Dobromir
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Viktor
    Viktor avatar
    6 posts
    Member since:
    Nov 2010

    Posted 08 Nov 2010 Link to this post

    Hi,

       I've got the same issue. Looks like it is reproducible only under IE. You can reproduce it with the help of the following steps:
    • Type anything in RadEditor and put the cursor on the end of editable area
    • Try to paste something with the help of pasteHtml

    RadEditor pastes it at the biginning of all text.
    Could you please provide solution how to paste html at the cursor position under IE?

    Thank you in advance.
    - Viktor Burdeinyi
  8. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 10 Nov 2010 Link to this post

    Hi Viktor,

    This problem can occur if you click out of the editor, thus losing its current selection, before pasting content in it using pasteHtml() method. To avoid this issue I suggest set html attribute unselectable="on" to elements that might be clicked and causes the selection to be lost. Please find attached a sample page demonstrating this approach.

    Sincerely yours,
    Dobromir
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Viktor
    Viktor avatar
    6 posts
    Member since:
    Nov 2010

    Posted 10 Nov 2010 Link to this post

    Hi Dobromir,

    Thank you for response.

    I couldn't apply your suggestion because the inserted HTML value is related to item, that is selected in the listbox.

    Is it possible to do this by another way?

    Thank you in advance.
    - Viktor Burdeinyi
  10. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 10 Nov 2010 Link to this post

    Hi Viktor,

    Could you please provide sample page demonstrating the specific scenario so we can examine it and try to provide suitable solution?

    Best wishes,
    Dobromir
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  11. Viktor
    Viktor avatar
    6 posts
    Member since:
    Nov 2010

    Posted 11 Nov 2010 Link to this post

    Hello Dobromir,

       Please look at the sample that illustrates how to reproduce the bug. Use it in IE 8. In my case, yellow area in the sample is a tab that I need to click for accessing to specific UI.

    Default.aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
    <head id="Head1" runat="server">
        <style type="text/css">
            html, body, form
            {
                height:100%;   
            }
        </style>
    </head>
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
            <div UNSELECTABLE="on" style="height:100%;">
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
                <telerik:RadWindowManager ID="RadWindowManager2" runat="server" />
                <telerik:RadEditor ID="RadEditor1" runat="server" />
                <asp:Button ID="Button1" runat="server" Text="Paste Text" OnClientClick="openDialog(); return false;" />
     
                <script type="text/javascript">
                    function openDialog()
                    {
                        var editor = $find("<%=RadEditor1.ClientID %>");
                        var oWnd = radopen("Dialog.aspx", 400, 400, true);
                        oWnd.argument = { RadEditor: editor };
                    }
                </script>
            </div>
        </form>
    </body>
    </html>

    Dialog.aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dialog.aspx.cs" Inherits="Silvon_Dialog" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
                <telerik:RadWindowManager ID="RadWindowManager2" runat="server" />
                <div style="background-color: #FFF8C4; border: solid 1px #FF715B; padding: 10px; width: 150px; margin-bottom: 10px;">
                    Click here before paste
                </div>
                <select id="listBox1" multiple="multiple">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3" selected="selected">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                </select>
                <textarea id="templateTextarea" rows="5" cols="20">%Value_{%}%</textarea>
                <asp:Button ID="Button1" runat="server" Text="Paste Text" OnClientClick="pasteContent(); return false;" />
            </div>
            <script type="text/javascript">
                function GetRadWindow1() {
                    if (window.radWindow) {
                        return window.radWindow;
                    } else if ((window.frameElement) && (window.frameElement.radWindow)) {
                        return window.frameElement.radWindow;
                    } else {
                        var iframes = document.getElementsByTagName("iframe");
                        for (var i = 0; i < iframes.length; i++) {
                            if (iframes[i].radWindow) return iframes[i].radWindow;
                        }
                    }
                }
     
                function pasteContent() {
                    var oWnd = GetRadWindow1();
                    var editor = oWnd.argument.RadEditor;
                    var listBox = document.getElementById("listBox1");
                    var template = document.getElementById("templateTextarea").value;
                    editor.pasteHtml(template.replace("{%}", listBox.value));
                }
            </script>
        </form>
    </body>
    </html>


    About unselectable="on", I'm not sure that I could apply it on the project, because it has a very complex HTML structure and a lot of JavaScript functionality.

    Thank you.
    - Viktor Burdeinyi
  12. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 12 Nov 2010 Link to this post

    Hi Viktor,

    For this scenario you can use the RadEditor's selection methods getRange() and selectRange() to preserve the cursor position when opening the dialog, e.g.:
    Default.aspx
    var cursorPosition = null;
    function openDialog()
    {
        var editor = $find("<%=RadEditor1.ClientID %>");
     
        cursorPosition = editor.getSelection().getRange();//store cursor position
     
        var oWnd = radopen("Dialog.aspx", 400, 400, true);
        oWnd.argument = { RadEditor: editor };
    }

    dialog.aspx
    function pasteContent()
    {
        var oWnd = GetRadWindow1();
        var editor = oWnd.argument.RadEditor;
        var listBox = document.getElementById("listBox1");
        var template = document.getElementById("templateTextarea").value;
     
        if (oWnd.BrowserWindow.cursorPosition)
            editor.getSelection().selectRange(oWnd.BrowserWindow.cursorPosition);//restore cursor position
     
        editor.pasteHtml(template.replace("{%}", listBox.value));
    }

    For your convenience I have attached sample page implementing the above approach.

    All the best,
    Dobromir
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  13. Viktor
    Viktor avatar
    6 posts
    Member since:
    Nov 2010

    Posted 12 Nov 2010 Link to this post

    Hi Dobromir,

    Thank you for the sample and response.

    But I am still able to reproduce it under IE 8 by following the steps:
    1. Type some text in RadEditor and leave cursor as it is (it is on the last of text)
    2. Open the dialog
    3. Click on the yellow area "Click here before paste"
    4. Click "Paste Text" button

    Result: the value is pasted at first position of RadEditor.
    Thank you.
    - Viktor Burdeinyi
  14. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 17 Nov 2010 Link to this post

    Hi Viktor,

    After further investigation on the issue it seems that it is a problem with Internet Explorer's selection. If you have any selected text the selection will be preserved, but if no text is selected the focus is taken by the button.

    We will look deeper in this case and I will write back to you as soon as we have more information on the subject.

    Regards,
    Dobromir
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  15. bitblock R
    bitblock R avatar
    9 posts
    Member since:
    Oct 2009

    Posted 29 Nov 2010 Link to this post

    Hello Dobromir,
    If you have found the solution of this issue for IE8, please answer. 
    Thanks,
    Vsevolod
  16. bitblock R
    bitblock R avatar
    9 posts
    Member since:
    Oct 2009

    Posted 01 Dec 2010 Link to this post

    Hi
    Is there new ideas about this issue?
    Thanks
  17. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 02 Dec 2010 Link to this post

    Hi,

    At present, the only suitable solution to this issue that I can recommend you is to use custom dialogs instead of manually open RadWindow to insert content from within it.

    You can find more detailed information on how to implement custom dialog to RadEditor in the following help article and live demo:
    Add Custom Dialogs
    Editor / Custom Dialogs

    Kind regards,
    Dobromir
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  18. IT Manager
    IT Manager avatar
    7 posts
    Member since:
    Sep 2007

    Posted 19 Jan 2012 Link to this post

    Hi Dobromir,

    Apart from your last suggestion, any new developments on this one?

    Regards,
    Joanna
  19. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 23 Jan 2012 Link to this post

    Hello,

    I am afraid that the IE problem still persists and the most suitable workaround for it is to build a custom dialog. If we find a solution, we will definitely notify you and your fellow developers.

    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
  20. Nick Jensen
    Nick Jensen avatar
    17 posts
    Member since:
    Jun 2006

    Posted 27 Mar 2014 Link to this post

    Hi there, can someone at telerik confirm that this is still a problem with IE, all these years later? I am using IE11.
    • Select an image by clicking it.
    • Use one of the standard editor menu buttons such as Bold, Italics or Alignment, and the selection is preserved
    • Open any dropdown (such as font size or the Insert Table dropdown) and the selection is now lost.

    Is there still no valid workaround for this?

  21. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 28 Mar 2014 Link to this post

    Hi Nick,

    The mentioned problem is about loosing the range of the selection when using custom dialogs. This is a matter of IE and cannot be resolved. Although this can be resolved by preserving and restoring the range as shown in this help article.

    The matter that you are reporting is not reproducible on my end. The drop-down tools are working as expected and the selection is correctly preserved. Please examine this screencast and let me know if I am missing something important to reproduce the issue.

    Regards,
    Ianko
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  22. Nick Jensen
    Nick Jensen avatar
    17 posts
    Member since:
    Jun 2006

    Posted 30 Mar 2014 in reply to Ianko Link to this post

    As I said, the issue occurs when selecting images, not text. When text is selected the selection is preserved.

    However as I described, when an image is selected, the selection is not lost when using buttons such as bold or left-align, only when a (standard or custom) dropdown is opened, such as font-size.

    So you can reproduce the issue by selecting an image, opening and closing the font-size dropdown (but not changing font-size), then try to align the image, which will not work.

    In fact using the demo I had to jump through hoops even to get the alignment to work. I had to select the image, turn on italics, select the image again, then right-align. It is then possible to left-right align as many times as you like, but once you open a dropdown it is not possible to align any more.

    Because the selection is lost before the dropdown is used, it is not possible to preserve the range as in the linked article.

    Nick
  23. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 01 Apr 2014 Link to this post

    Hello Nick,

    I tried reproducing the described behavior with this online example, but to no avail. Please examine this screencast and let me know if I am missing something important that could lead to the problematic behavior.

    It would be very helpful if you could open a proper support ticket with more details about the encountered problem along with a sample project that demonstrates the implemented custom dialog, so that we could investigate this issue and suggest a proper resolutions.

    Regards,
    Ianko
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  24. Nick Jensen
    Nick Jensen avatar
    17 posts
    Member since:
    Jun 2006

    Posted 01 Apr 2014 in reply to Ianko Link to this post

    Hi Lanko,

    I have been using the same online example. In your demo you start by deleting everything except the image, which I had not tried - it doesn't seem like a very realistic example. But yes, when there is nothing in the editor but the image, it appears to work correctly.

    To see the behaviour I described in my previous post, just leave the demo content as it is.
    1. Select the image (click on it)
    2. Try to right align (the image is not aligned, but the text above is)
    3. Select the image again
    4. Turn on italics (does nothing but helps get hold of the image)
    5. Select the image again
    6. Right align (now works)
    7. Left align (also works)
    8. Open a dropdown, such as the style dropdown but DO NOT select a style
    9. Right align (does not work, as the selection has been lost)
    10. Select the image again
    11. Open a dropdown, such as the style dropdown, and try to apply a style
    12. Look at the html - the style has NOT been applied, because the selection was lost when the dropdown opened

    So as I said, this is standard behaviour, and I don't see any value in creating a sample project - if the selection is lost before a dropdown value can be chosen, there is no point in debugging beyond that.

    But if you can come up with a clever way of capturing the selection _before_ the dropdown is opened, that would be very useful. Even more useful if it was built into the editor...

  25. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 03 Apr 2014 Link to this post

    Hi Nick,

    The alignment issue with this content is due to the css float attribute. Removing these styles will resolve the problem and let you align the image as expected.

    The problem with the selection, you are correct, following your steps I was able to reproduce the issue. 

    I will log this into our database for fixing. Due to the complexity of the browser 's selection matter I am unable to estimate when exactly is going to be resolved.

    As a token of gratitude for this report, please accept a small amount of Telerik points. 

    Regards,
    Ianko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017