how to maintain the insertion point when I am loading a picture from a script fired from a custom control on the toolbar?

13 posts, 0 answers
  1. Marc
    Marc avatar
    21 posts
    Member since:
    Nov 2008

    Posted 19 Feb 2009 Link to this post

    I am using Radeditor and have this scenarion where I upload picutres and insert them in my radeditor document.

    I have a cusom button on the rad editor toolbar which fires the upload operation all in javascript on the client.
    the picture uploads without postback, and in my script I try to insert it at the point where the insertion point was when the user clicked on the custom button that fired the whole operation.

    The problem is that the picture is always, always inserted at the very begining of the document.

    is there a way that I can maintain the insert position when I insert my picture?

    this is very basic, in Radeditor i have a custom button deined and then it calls a javascript function:

    <

     

    script type="text/javascript">

     

    Telerik.Web.UI.Editor.CommandList[

    "Custom1"] = function(commandName, editor, args)

     

    {

    DoLoadNewPhoto();

    };

    </

     

    script>

     


    and then when my file uploads returns i insert it in the editor also with javscript like this:

    var

     

    str = '<img id="Tempdivphoto{1}" alt="" src="/BCW_Web/PhotoFeeders/GetNewTempForumPostPhotoThumbNail.aspx?ForumPostTempPhotoIndex={2}"/>'

     

     

    var tempstr = String.format(str, temvt.get_Title(), indexcount, TempPhotoArrayIndex);

     

    temvt.set_ObjectString(tempstr);

    $find(Posteditor).setFocus();

    $find(Posteditor).pasteHtml(tempstr);

    but always it inserts at the top instead of where the insertion point originally was.

  2. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 23 Feb 2009 Link to this post

    Hello Marc,

    Since I am not aware of what exactly code you execute to upload your picture, I might not be able to provide you with the best answer right away, but here are a couple of suggestions:

    1. Have you tried seeing what happens if you do not use the $find(Posteditor).setFocus(); line?
    2. You can create a range object for the editor's content area before the upload, and then re-select the range before pasting, e.g.

    //Global variable
    var range = null;

    Telerik.Web.UI.Editor.CommandList["Custom1"] = function(commandName, editor, args)

    {

      //STEP 2
      range = editor.getSelection().getRange();
      DoLoadNewPhoto();
    };

    //STEP 3
    $find(Posteditor).getSelection().selectRange(range);$find(Posteditor).pasteHtml(tempstr);

    Sincerely yours,
    Tervel
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marc
    Marc avatar
    21 posts
    Member since:
    Nov 2008

    Posted 23 Feb 2009 Link to this post

    thank you veru much.

    I ll try what you suggest here and get back to you.

    about the  $find(Posteditor).setFocus(); line, I have added that to try to correct the behavior that I am trying to correct here.

  5. Marc
    Marc avatar
    21 posts
    Member since:
    Nov 2008

    Posted 07 Mar 2009 Link to this post

    thank you tervel,

    selecting a range worked fine
  6. MCM Net
    MCM Net avatar
    8 posts
    Member since:
    Dec 2008

    Posted 26 Jan 2010 Link to this post

    There is a problem with this code and Internet Explorer 8.

    If one places the cursor at a point in the text of the RadEditor, but does not select any text an error occurs when calling selectRange with the saved range before the paste:

    Line: 4674  
    Error: Unexpected call to method or property access. 

  7. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 28 Jan 2010 Link to this post

    Hi Steven,

    Could you please isolate the problem in a sample working project and send it for examination by opening a support ticket? Please, include sample content for test in the attachment.

    Thank you for your assistance.

    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.
  8. Jack
    Jack avatar
    4 posts
    Member since:
    Sep 2011

    Posted 30 Sep 2013 Link to this post

    I realize this thread is several years old, but I am having a similar issue.  I have a RadEditor and a RadComboBox on the page. the user types into the editor and can click on the combobox at any time. When they do, the Value from the combobox should be inserted in the editor. My issue is, when the user clicks on the combobox, the Range selected during blur changes to a Range in the combobox and the Value from the combobox always posts to the beginning of the editor.

    <script type="text/javascript">
        var editor;
        var rng;
        function putTag(sender, eventArgs) {
            {
                try {
                    goo = $find("<%=cboTag.ClientID %>")
                    var foo = goo.get_selectedItem().get_value();
                    editor.pasteHtml("[/" + foo + "/]");
                    editor.getSelection().selectRange(rng);
                }
                catch (err) {
                }
            }
        }
        function getSel(sender, eventArgs) {
            {
                try {
                    var selection = editor.getSelection();
                    rng = editor.getSelection().getRange();
                }
                catch (err) {
                }
            }
        }
        function OnClientLoad(Reditor, eventArgs) {
            var element = document.all ? Reditor.get_document().body : Reditor.get_document();
            $telerik.addExternalHandler(element, "blur", function (e) {
                editor = Reditor;
                getSel(Reditor, eventArgs);
            });
        }
        </script>

    the combobox is:
    <telerik:RadComboBox ID="cboTag" runat="server" AutoPostBack="True" Width="250px" OnClientSelectedIndexChanged="putTag">
    </telerik:RadComboBox>
    And the editor is:
    <telerik:RadEditor ID="RadEditor1" runat="server" Width="100%" OnClientLoad="OnClientLoad">
        <Content>
            <p>Random information typed in here.<br /><br /></p>
        </Content>
    </telerik:RadEditor>
  9. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 03 Oct 2013 Link to this post

    Hi Marc,

    Please try the following logic for the desired customization:
    <script type="text/javascript">
        function putTag(sender, eventArgs) {
            try {
                var itemsValue = sender.get_selectedItem().get_value();
                var editor = $find("<%= RadEditor1.ClientID %>");
                var rng = editor.getSelection().getRange();
                editor.getSelection().selectRange(rng);
                editor.pasteHtml("[/" + itemsValue + "/]");
            }
            catch (err) {
            }
     
        }
    </script>
     
    <telerik:RadComboBox ID="cboTag" runat="server" AutoPostBack="True" Width="250px"
        OnClientSelectedIndexChanged="putTag">
        <Items>
            <telerik:RadComboBoxItem Value="Some value" Text="Item1" />
            <telerik:RadComboBoxItem Value="Some value2" Text="Item2" />
        </Items>
    </telerik:RadComboBox>
     
     
    <telerik:RadEditor ID="RadEditor1" runat="server" Width="100%">
        <Content>
            <p>Random information typed in here.<br /><br /></p>
        </Content>
    </telerik:RadEditor>
     
    Note that the range object could be retrieved at any time, because the editor's iframe is preserving it even if an outside element is clicked.

    Regards,
    Ianko
    Telerik
    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 the blog feed now.
  10. Jack
    Jack avatar
    4 posts
    Member since:
    Sep 2011

    Posted 03 Oct 2013 Link to this post

    Hi Ianko,

    This still does not work for me. It still inserts the text value from the RadComboBox at the beginning of the line in the RadEditor. It works using a standard combobox however. Using the same getSel function:

    function getSel(sender, eventArgs) {
        try {
       var selection = editor.getSelection();
              rng = editor.getSelection().getRange();
         }
     catch (err) {
     }
    }

    and adding this putTag function:
    try {
        var goo = document.getElementById("ddlTag")
        var foo = goo.options[goo.selectedIndex].value;
        editor.pasteHtml("[/" + foo + "/]");
        editor.getSelection().selectRange(rng + (foo.length + 5));
        editor.focus();
    } catch (err) {
    }

  11. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 07 Oct 2013 Link to this post

    Hi Marc,

    I would like to mention that the suggested function is only for example and it is not required to be absolutely the same for the desired functionality.

    Although I will point out the required steps that are missed in the provided logic:
    1. Get the value -
      var goo = document.getElementById("ddlTag");
      var foo = goo.options[goo.selectedIndex].value;
    2. Get the editor's Client-side objects:
      var editor = $find("<%= RadEditor1.ClientID %>");
    3. Get the Range:
      var rng = editor.getSelection().getRange();
    4. Set the same range to the selections object, so that the pasteHtml() method is able to insert the desired content on the cursor's position:
      editor.getSelection().selectRange(rng);
    5. Last invoke the pasteHtml() method with the desired data: 
      editor.pasteHtml("[/" + itemsValue + "/]");

    Note that in the used logic the pasteHtml() is invoked before the retrieved selection object and then the editor is focused. If the range is not set additionally before the use of the paste functionality the eidtor will not be able to correctly insert any data in the desired selection. 

    Regards,
    Ianko
    Telerik
    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 the blog feed now.
  12. Ravi
    Ravi avatar
    9 posts
    Member since:
    Jul 2014

    Posted 02 Dec 2015 in reply to Ianko Link to this post

    Hi Lanko,

    i see ur solution and i put it but really i cant tansfer the text from (I hava a radlistbox) to htmleditor content.

    i put my little code to u..

    <tele:RadEditor ID="RadEditor1" runat="server" ToolbarMode="RibbonBar" AutoResizeHeight="true" Skin="Office2007"  EnableResize="false"  Height="760px"     _ToolsFile="tools.xml"   Width="100%" > </tele:RadEditor>

     

     <tele:RadListBox ID="listboxview" runat="server"  Height="500px"  Width="100%" Font-Size="11px"  DataTextField="master"
                                     DataValueField="master" OnClientSelectedIndexChanged="putTag"   OnItemDataBound="listboxview_ItemDataBound"  ></tele:RadListBox>

     

     <script type="text/javascript">
          
            function putTag(sender, eventArgs) {
                try {
                    var itemsValue = sender.get_selectedItem().get_value();
                    var editor = $find("<%= RadEditor1.ClientID %>");
                    var rng = editor.getSelection().getRange();
                    editor.getSelection().selectRange(rng);
                    editor.pasteHtml("[/" + itemsValue + "/]");
                    editor.focus();
                } catch (err) {
                }
            }
        </script>

     

    I dont get any error and i get the Text name from the Listbox also, but i dont know y this is not working.

     I do the same work on Ajax Tool kit but now i am converting my application using telerik so plz assist me its very urgent.

  13. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 02 Dec 2015 Link to this post

    Hi Ravi,

    The code below is related to RadComboBox integration, not to RadListBox. However, the same approach should do the job. And by using it on my end, everything works as expected:
    <script type="text/javascript">
        function putTag(sender, eventArgs) {
            try {
                var itemsValue = sender.get_selectedItem().get_value();
                var editor = $find("<%= RadEditor1.ClientID %>");
                var rng = editor.getSelection().getRange();
                editor.getSelection().selectRange(rng);
                editor.pasteHtml("[/" + itemsValue + "/]");
            }
            catch (err) {
            }
     
        }
    </script>
     
    <telerik:RadComboBox ID="cboTag" runat="server" AutoPostBack="false" Width="250px"
        OnClientSelectedIndexChanged="putTag">
        <Items>
            <telerik:RadComboBoxItem Value="Some value" Text="Item1" />
            <telerik:RadComboBoxItem Value="Some value2" Text="Item2" />
        </Items>
    </telerik:RadComboBox>
     
    <telerik:RadListBox ID="listboxview" runat="server"
         OnClientSelectedIndexChanged="putTag">
        <Items>
            <telerik:RadListBoxItem Value="Some value" Text="Item1" />
            <telerik:RadListBoxItem Value="Some value2" Text="Item2" />
        </Items>
    </telerik:RadListBox>
     
     
    <telerik:RadEditor ID="RadEditor1" runat="server" Width="100%">
        <Content>
              <p>Random information typed in here.<br /><br /></p>
        </Content>
    </telerik:RadEditor>
     

    Here you are a screencast of the results on my end—http://screencast.com/t/no3D9XQf.

    Regards,
    Ianko
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  14. Ravi
    Ravi avatar
    9 posts
    Member since:
    Jul 2014

    Posted 09 Dec 2015 in reply to Ianko Link to this post

    Thnk u so much.. but still i dont know may be their is some problem on my page im working with master page and i tried ur code on fresh page that runs good. but i cant understand why this not working with masterpage.

     

    Thnks for help.

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