TinyMCE 4 - 獲取插入位置

Question

我想在Tiny MCE 4中獲取插入位置，但我不想獲取行/列號 - 我想獲取像素位置（x & y dimmension）。它可以相對於任何事物。 最後一件事 - 我想要在內容中創建任何附加標籤，如書籤。 TinyMCE是否有辦法做到這一點？或者有沒有選擇以像素爲單位獲得書籤位置，然後刪除它？

感謝回覆

Answer 1

好的，我找到了。

首先你必須得到tinymce.Editor類的實例var editor = new tinymce.Editor(); //or another way, like tinyMCE.activeEditor

下一頁使用TinyMCE的小部件的jQuery的位置得到：

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

我們在textareaTop && textareaLeft位置的插入符相對於TinyMCE編輯器窗口（textarea）。現在是時候獲得相對於整個頁面位置（瀏覽器窗口）：

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

解決方案基於autocomplete plugin for TinyMCE 3，我就適應我的TinyMCE的需求4.