2013-08-07 3 views
3

Я хочу получить позицию каретки в Tiny MCE 4, но я не хочу получать номер строки/столбца - я хочу получить позицию в пикселях (x y dimmension). Это может быть относительно чего угодно. Последнее: я хочу сделать это без создания каких-либо дополнительных тегов в контенте, таких как закладки. У TinyMCE есть способ сделать это? Или есть возможность получить позицию закладки в пикселях, а после этого удалить ее?TinyMCE 4 - получить позицию каретки

Спасибо за ответы

ответ

7

Хорошо, я нашел.

Во-первых, вы должны получить экземпляр класса tinymce.Editor var editor = new tinymce.Editor(); //or another way, like 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; 
} 

У нас есть в textareaTop && textareaLeft положениях каретки относительно редактора TinyMCE Window (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.

+0

Я думаю, в этой строке: ' textareaTop = parseInt ($ ($ this.selection.getNode()). css ("font-size")) * 1.3 + nodePosition.top; '' 'this this.selection' должен быть' editor.selection' (это исправлено JS в моем коде, когда я его использовал) – EvilDr

+0

@EvilDr да, вы правы. Это мой отказ от jQuery, я забыл заменить '$ this' на' editor'. –

Смежные вопросы