javascript - 获取CKEditor中选择的坐标

标签 javascript ckeditor tooltip coordinates selection

当选择文本时,我希望在其上方显示一个跨度(如工具提示)。这是跨度:

var span = new CKEDITOR.dom.element.createFromHtml('<span style="position:absolute; display: none; " >Tooltip</span>'); span.setStyle('border', '2px solid black'); span.setStyle('width', '50px'); span.setStyle('height', '50px');

它必须添加到选区上方,但我找不到获取选区坐标的方法:

span.setStyle('display', 'none');
var editorSel = editor.getSelection();
var selElement = editorSel.getSelectedElement();
if (editorSel.getSelectedText() != '') {
setTimeout(function() {
     //Some way to get the coordinates
     span.setStyle('top', top + 'px');
     span.setStyle('left', left + 'px');
     span.setStyle('display', 'block');

     var ranges = editorSel.getRanges();
     var range = ranges[0];
     range.insertNode(span);
}

任何帮助将不胜感激。

最佳答案

您可以使用以下方法从 CKEditor 获取编辑器窗口对象,尽管可能有更直接的方法:

var win = editor.window.$;

从那里,您可以使用 this answer 中的 getSelectionCoords() :

var coords = getSelectionCoords(win); 

关于javascript - 获取CKEditor中选择的坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29922214/

相关文章:

django - 无法在 django-ckeditor 中配置 youtube 插件

html - ckEditor,更改插入图像的图像类

html - CK编辑器 : How to load the my own javascript file

javascript - 图像选择器不起作用

javascript - 下一个 上一个 预览 slider 导航

javascript - 一旦获得焦点,将 RadioButton 值设置为 true,然后点击 asp :RadioButton 中的 Enter 按钮

javascript - DC js 复合图表工具提示

javascript - html5中data-description属性中的html列表

Silverlight:如何设置验证工具提示的样式?

html - 没有 overflow-y 的 div 内的垂直滚动条 : scroll