Telerik RadEditor move cursor while dragging

Question

I have a C# webforms page where I want to drag html elements into a telerik radeditor. This part is working as expected except that when you drag an element onto the editor I want the cursor position in the radeditor to follow the mouse. It is set up similar to this demo on Teleriks web site. Except I am using a listview instead of treeview. http://demos.telerik.com/aspnet-ajax/editor/examples/treeviewandeditor/defaultcs.aspx

I have tried simulating clicks on the radeditor to move the cursor, but no luck there. Any ideas?

Edit:

I have made a semi-working solution last week. Its far from perfect but I decided to share it in case some one else wants to make it better.

      function controlDragging(sender, args) {
            var event = args.get_domEvent();
            var editor = $find("radEditLayout");

            if (isMouseOverEditor(editor, event)) {
                var x = event.pageX - event.offsetX;
                var y = event.pageY - event.offsetY;
                var node = editor.get_document().elementFromPoint(x, y);
                if (node) {
                    setCaret(editor, node, 0);           
                }
            }
        }

        function setCaret(editor, element, position) {
            var selection = editor.getSelection(),
            range = selection.getRange(true);
            if (range.setStartAfter) {//W3 range
                range.setStartAfter(element);
            }
            else { //IE7/8 textRange
                range.moveToElementText(element);
                range.moveStart('character', position);
            }
            range.collapse(true);
            selection.selectRange(range);
        }

        function isMouseOverEditor(editor, event) {
            return $telerik.isMouseOverElementEx(editor.get_contentAreaElement(), event);
        }

Any more suggestions??

score 0 · Accepted Answer · edited May 23 '17 at 12:01

0

Perhaps you will be able to figure out something with ranges, but I am not sure exactly how as I have not used them. Here are the basics on getting an already selected range http://www.telerik.com/help/aspnet-ajax/editor-getselection-1.html and here is how to get the document object so you can use ranges in it: http://www.telerik.com/help/aspnet-ajax/editor-getting-reference-to-radeditor-documentobject.html. Perhaps this can help you get started but I think it will be a lot of work: How to set caret(cursor) position in contenteditable element (div)? because I am not sure how you can calculate the position at which you want the cursor from the mouse coordinates.

edited May 23 '17 at 12:01

Community

1
1

answered Jul 15 '14 at 12:31

rdmptn

5,413
1
16
29

Thanks for the suggestions, I tried some more things, but still no luck. you can see what sort of things i tried in the edit – Nathan Hart Jul 15 '14 at 18:49
Try switching from iframe content area mode to div mode by setting ContentAreaMode="div". This should make the implementation easier, because you will work on the same page. – Rumen Jekov Jul 15 '14 at 18:53
I have been using div mode – Nathan Hart Jul 15 '14 at 18:59
Considering you accepted my ideas as an answer, you seem to have figured it out. If so, you may want to post it here as this can earn you some points: http://www.telerik.com/support/code-library/aspnet-ajax/editor and you will also help other people. You can also post the solution here too, I think. – rdmptn Jul 28 '14 at 13:01

score 0 · Answer 2 · answered Jan 12 '17 at 18:14

I know this post is old but perhaps others can benefit from it. Here's a snippet that helped me drop at a random position in the RadEditor content area. It does not involve moving the cursor position.

kendoDropTarget({
        drop: function(e) {
              debugger;
                var top = e.draggable.drag.y.location - $('.k-content').offset().top;
                var left= e.draggable.drag.x.location - $('.k-content').offset().left;
              element.css({
                  top: top + 'px',
                  left: left + 'px'
              });
              $('.overlay').remove();
              $('.k-content').contents().find('body').html($('.k-content').contents().find('body').html() + $(element).outerHTML());
        }

Telerik RadEditor move cursor while dragging

2 Answers2