Search code examples
c#javascriptasp.nettelerikradeditor

Telerik RadEditor move cursor while dragging


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??


Solution

  • 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.