我希望能够将当前鼠标位置转换为范围,特别是在CKEditor中.
CKEditor提供了一个API,用于根据范围设置光标:
var ranges = new CKEDITOR.dom.range( editor.document );
editor.getSelection().selectRanges( [ ranges ] );
Run Code Online (Sandbox Code Playgroud)
由于CKEditor提供了这个API,因此可以通过删除此要求来简化问题,并且只是找到一种方法来从包含各种HTML元素的div上的鼠标坐标生成范围.
但是,这与将鼠标坐标转换为textarea中的光标位置不同,因为textareas具有固定的列宽和行高,CKEditor通过iframe呈现HTML.
基于此,看起来该范围可以应用于元素.
你如何计算出最接近当前鼠标位置的开始/结束范围?
编辑:如何使用ckeditor API在mouseup事件上选择范围的示例.
editor.document.on('mouseup', function(e) {
this.focus();
var node = e.data.$.target;
var range = new CKEDITOR.dom.range( this.document );
range.setStart(new CKEDITOR.dom.node(node), 0);
range.collapse();
var ranges = [];
ranges.push(range);
this.getSelection().selectRanges( ranges );
});
Run Code Online (Sandbox Code Playgroud)
上述示例的问题在于,事件目标节点(e.data.$.target)仅针对HTML,BODY或IMG等节点触发,但不针对文本节点触发.即使它这样做,这些节点也代表不支持将光标设置到该文本块内鼠标位置的文本块.
我在iframe之外有一个可拖动的jquery.我需要在iframe droppables中创建元素.当我拖动iframe时,"over"事件不会触发,但如果我继续拖动iframe,则"over"事件会触发.
看起来这也发布在这里但从未回答过. jQuery和iframe以及奇怪的定位:是否有解决方法?
编辑:代码示例
HTML
<div id="draggable">
</div>
<iframe id="iframe"/>
Run Code Online (Sandbox Code Playgroud)
JavaScript的
$("#draggable").draggable();
var body = $('#iframe').contents().find('body');
$(body).droppable({
over:function(event,ui) {
alert('over droppable');
}
});
Run Code Online (Sandbox Code Playgroud)