2014-07-11 95 views
0

我有一个C#webforms页面,我想将html元素拖入telerik radeditor。这部分按预期工作,除了当您将元素拖动到编辑器上时,我希望radeditor中的光标位置跟随鼠标。它的设置与Teleriks网站上的这个演示类似。除了我使用listview而不是treeview。 http://demos.telerik.com/aspnet-ajax/editor/examples/treeviewandeditor/defaultcs.aspxTelerik RadEditor在拖动时移动光标

我已经尝试模拟点击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); 
     } 

更多建议?

回答

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。也许这可以帮助你开始,但我认为这将是很多工作:How to set caret(cursor) position in contenteditable element (div)?,因为我不知道你如何计算你想从鼠标坐标光标的位置。

+0

感谢您的建议,我尝试了更多的东西,但仍然没有运气。你可以看看我在编辑中尝试过什么样的东西 –

+0

尝试通过设置ContentAreaMode =“div”从iframe内容区域模式切换到div模式。这应该使实现更容易,因为你将在同一页面上工作。 –

+0

我一直在使用div模式 –

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