This is a migrated thread and some comments may be shown as answers.

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

12 Answers 271 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Marc asked on 19 Feb 2009, 08:39 PM
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.

12 Answers, 1 is accepted

Sort by
0
Tervel
Telerik team
answered on 23 Feb 2009, 03:32 PM
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.
0
Marc
Top achievements
Rank 1
answered on 23 Feb 2009, 03:35 PM
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.

0
Marc
Top achievements
Rank 1
answered on 07 Mar 2009, 07:03 PM
thank you tervel,

selecting a range worked fine
0
MCM Net
Top achievements
Rank 1
answered on 26 Jan 2010, 10:28 AM

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. 

0
Rumen
Telerik team
answered on 28 Jan 2010, 03:10 PM
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.
0
Jack
Top achievements
Rank 1
answered on 30 Sep 2013, 12:48 PM
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>
0
Ianko
Telerik team
answered on 03 Oct 2013, 10:42 AM
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.
0
Jack
Top achievements
Rank 1
answered on 03 Oct 2013, 01:02 PM
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) {
}

0
Ianko
Telerik team
answered on 07 Oct 2013, 03:31 PM
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.
0
Ravi
Top achievements
Rank 1
answered on 02 Dec 2015, 06:55 AM

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.

0
Ianko
Telerik team
answered on 02 Dec 2015, 07:38 AM
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
0
Ravi
Top achievements
Rank 1
answered on 09 Dec 2015, 08:06 AM

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.

Tags
Editor
Asked by
Marc
Top achievements
Rank 1
Answers by
Tervel
Telerik team
Marc
Top achievements
Rank 1
MCM Net
Top achievements
Rank 1
Rumen
Telerik team
Jack
Top achievements
Rank 1
Ianko
Telerik team
Ravi
Top achievements
Rank 1
Share this question
or