TinyMCE 4 - 获取光标位置

Question

我想在Tiny MCE 4中获取插入符位置，但我不想获取行/列编号 - 我想获取像素位置（x和y维度）。它可以相对于任何东西。最后一件事 - 我希望在不创建任何其他内容标记（如书签）的情况下完成这个操作。TinyMCE有这样的方法吗？或者有没有选项可以获取书签位置（以像素为单位），然后将其删除？

感谢您的回复

- michail_w

Answer 1

好的，我找到了。

首先，您需要获取tinymce.Editor类的实例 var editor = new tinymce.Editor(); //或者另一种方式，例如tinyMCE.activeEditor

接下来，使用jQuery获取tinyMCE小部件的位置：

var tinymcePosition = $(editor.getContainer()).position();
var toolbarPosition = $(editor.getContainer()).find(".mce-toolbar").first();

现在获取正在编辑的HTML节点的位置：

var nodePosition = $(editor.selection.getNode()).position();
var textareaTop = 0;
var textareaLeft = 0;

我们已经有了Y轴位置（通过nodePosition.top），现在要获取X轴：

if (editor.selection.getRng().getClientRects().length > 0) {
    textareaTop = editor.selection.getRng().getClientRects()[0].top + editor.selection.getRng().getClientRects()[0].height;
    textareaLeft = editor.selection.getRng().getClientRects()[0].left;
} else {
    textareaTop = parseInt($($this.selection.getNode()).css("font-size")) * 1.3 + nodePosition.top;
    textareaLeft = nodePosition.left;
}

现在我们拥有相对于TinyMCE编辑器窗口（textarea）的光标位置textareaTop && textareaLeft。现在是时候获取相对于整个页面（浏览器窗口）的位置了：

var position = $(editor.getContainer()).offset();
var caretPosition = {
    top:  tinymcePosition.top + toolbarPosition.innerHeight() + textareaTop,
    left: tinymcePosition.left + textareaLeft + position.left
}

解决方案基于TinyMCE 3的自动完成插件，我将其适应了TinyMCE 4的需求。

- michail_w

---

我认为在这一行代码中：textareaTop = parseInt($($this.selection.getNode()).css("font-size")) * 1.3 + nodePosition.top; 应该把 $this.selection 改成 editor.selection （当我使用它时，这修复了我的代码中的JS问题）。 - EvilDr

@EvilDr 是的，你说得对。这是我回退到jQuery的方法，我忘记将“$this”替换为“editor”。 - michail_w