我有一个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);
}
还有其他建议吗?
答案 0 :(得分: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)?因为我不知道如何计算你想要光标从鼠标坐标的位置。
答案 1 :(得分: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());
}