Telerik RadEditor拖動時移動光標

Question

我有一個C＃Webforms頁面，我想將html元素拖到telerik radeditor中。 這部分工作正常，不同之處在於，當您將元素拖動到編輯器上時，我希望radeditor中的光標位置跟隨鼠標。 它的設置類似於Teleriks網站上的此演示。 除了我使用的是listview而不是treeview。 http://demos.telerik.com/aspnet-ajax/editor/examples/treeviewandeditor/defaultcs.aspx

我嘗試模擬在radeditor上的單擊以移動光標，但是沒有運氣。 有任何想法嗎？

編輯：

我上周提出了一個半解決方案。 它遠非完美，但我決定與他人分享，以防其他人想使其更好。

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

還有其他建議嗎？

Answer 1

也許您將能夠找出帶有范圍的東西，但是我不確定如何正確使用它們。 這是獲取已選擇范圍的基礎， http：//www.telerik.com/help/aspnet-ajax/editor-getselection-1.html ，這是獲取文檔對象的方法，因此您可以在其中使用范圍： http://www.telerik.com/help/aspnet-ajax/editor-getting-reference-to-radeditor-documentobject.html 。 也許這可以幫助您入門，但是我認為這將需要大量工作： 如何在contenteditable元素（div）中設置插入符（光標）的位置？ 因為我不確定如何從鼠標坐標中計算出想要的光標位置。

Answer 2

我知道這篇文章很舊，但也許其他人可以從中受益。 這是一個幫助我放到RadEditor內容區域中任意位置的代碼段。 它不涉及移動光標位置。

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());
        }