TinyMCE 4-获取插入符号位置
TinyMCE 4 - get caret position
我想在Tiny MCE 4中获得插入符号位置,但我不想获得行/列编号-我想获得以像素为单位的位置(x&y dimension)。它可以相对于任何事物。最后一件事——我想做到这一点,而不在内容中创建任何额外的标签,比如书签。TinyMCE有办法做到这一点吗?或者,是否有以像素为单位获取书签位置的选项,然后将其删除?
感谢回复
好的,我找到了。
首先你必须获得tinymce的实例。编辑器类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编辑器窗口(文本区域)的插入符号位置。现在是时候获取相对于整个页面(浏览器窗口)的位置了:
var position = $(editor.getContainer()).offset();
var caretPosition = {
top: tinymcePosition.top + toolbarPosition.innerHeight() + textareaTop,
left: tinymcePosition.left + textareaLeft + position.left
}
解决方案基于TinyMCE 3的自动完成插件,我在TinyMCE 4中对其进行了调整以满足我的需求。
相关文章:
- 将插入符号位置移动到ContentEditable<DIV>
- 为更改的输入返回插入符号位置的逻辑
- JavaScript 插入符号位置
- 链接内的内容可编辑块,如何防止重定向,但让文本选择插入符号位置更改
- 如何使用javascript获取&使用字符偏移量设置插入符号位置
- text使用shift键和箭头键时的区域插入符号位置
- 在插入符号位置获取DOM元素
- tinymce丢失插入符号位置
- 如果页面上没有 标记,如何获得插入符号位置
- JavaScript:将插入符号位置设置为第一段的开头(Opera bug)
- 是否可以在不轮询的情况下观看文本区域中的插入符号位置
- CKEditor:调用编辑器#setData后恢复插入符号位置
- 插入符号位置未跟踪
- 文本区域中的插入符号位置和周围字符
- 当存在 IMG 元素时,如何设置插入符号位置
- 如何获取SCEditor文本区域中的当前插入符号位置
- 在插入符号位置插入HTML而不创建对象
- Adobe Edge:获取此符号位置
- TinyMCE 4-获取插入符号位置
- 从当前鼠标位置设置内容可编辑插入符号位置