0

我有一个 C# webforms 页面，我想将 html 元素拖到 Telerik radeditor 中。这部分按预期工作，除了当您将元素拖到编辑器上时，我希望 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);
        }

还有什么建议吗？？

4

2 回答 2

0

也许你能用范围找出一些东西，但我不确定我是怎么用的，因为我没有使用它们。以下是获取已选择范围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）中设置插入符号（光标）位置？因为我不确定如何从鼠标坐标计算光标所在的位置。

于 2014-07-15T12:31:30.343 回答
0

我知道这篇文章很旧，但也许其他人可以从中受益。这是帮助我在 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());
        }
于 2017-01-12T18:14:00.257 回答