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

[Marc]

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.

[Tervel]

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.

[Marc]

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.

[Marc]

thank you tervel,

selecting a range worked fine

[MCM Net]

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.

[Rumen]

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.

[Jack]

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>

[Ianko]

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

[Jack]

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) {
}

[Ianko]

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

[Ravi]

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.

[Ianko]

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

[Ravi]

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.