Telerik RadEditor перемещает курсор при перетаскивании

У меня есть страница веб-форм C #, на которой я хочу перетащить элементы html в radeditor telerik. Эта часть работает так, как ожидалось, за исключением того, что когда вы перетаскиваете элемент в редактор, я хочу, чтобы позиция курсора в radeditor следовала за курсором мыши. Он настроен аналогично этой демонстрации на веб-сайте Teleriks. За исключением того, что я использую просмотр в виде списка вместо просмотра в виде дерева. 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);
        }

Есть еще предложения ??


javascript c# asp.net telerik radeditor
person Nathan Hart    schedule 11.07.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Возможно, вы сможете что-то выяснить с диапазонами, но я не уверен, как именно, поскольку я их не использовал. Вот основы получения уже выбранного диапазона 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)? потому что я не уверен, как вы можете вычислить позицию, в которой вы хотите установить курсор, по координатам мыши.

person rdmptn    schedule 15.07.2014
comment
Спасибо за предложения, я попробовал еще кое-что, но все равно не повезло. Вы можете увидеть, какие вещи я пробовал в редактировании - person Nathan Hart; 15.07.2014
comment
Попробуйте переключиться из режима области содержимого iframe в режим div, установив ContentAreaMode = div. Это должно упростить реализацию, потому что вы будете работать на одной странице. - person Rumen Jekov; 15.07.2014
comment
Я использую режим div - person Nathan Hart; 15.07.2014
comment
Учитывая, что вы приняли мои идеи в качестве ответа, вы, кажется, поняли это. Если да, вы можете разместить его здесь, так как это может принести вам несколько очков: telerik.com/support/code-library/aspnet-ajax/editor, и вы также поможете другим людям. Думаю, вы также можете опубликовать решение здесь. - person rdmptn; 28.07.2014

arrow_upward
0
arrow_downward

Я знаю, что этот пост старый, но, возможно, он пригодится другим. Вот фрагмент, который помог мне попасть в случайную позицию в области содержимого 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());
        }
person Victor Grippi    schedule 12.01.2017