如何获取包含图像的内容可编辑 div 的插入符号位置
Posted
技术标签:
【中文标题】如何获取包含图像的内容可编辑 div 的插入符号位置【英文标题】:how to get the caret position of a contenteditable div which contains images 【发布时间】:2017-04-06 11:17:39 【问题描述】:我有这个 contentedittable div
<div contenteditable="true" id="text">minubyv<img src="images/smiley/Emoji Smiley-01.png" class="emojiText" />iubyvt</div>
这是代码输出的图片说明
所以我想获取 div 的插入符号位置,并假设光标在最后一个字符之后。这是我获取插入符号位置的代码
function getCaretPosition(editableDiv)
var caretPos = 0,
sel, range;
if (window.getSelection)
sel = window.getSelection();
if (sel.rangeCount)
range = sel.getRangeAt(0);
if (range.commonAncestorContainer.parentNode == editableDiv)
caretPos = range.endOffset;
else if (document.selection && document.selection.createRange)
range = document.selection.createRange();
if (range.parentElement() == editableDiv)
var tempEl = document.createElement("span");
editableDiv.insertBefore(tempEl, editableDiv.firstChild);
var tempRange = range.duplicate();
tempRange.moveToElementText(tempEl);
tempRange.setEndPoint("EndToEnd", range);
caretPos = tempRange.text.length;
return caretPos;
var update = function()
console.log(getCaretPosition(this));
;
$('#text').on("mousedown mouseup keydown keyup", update);
但问题是它返回6
而不是14
。插入符号位置在图像之后返回到0
。请问有没有办法在这种情况下让插入符号位置成为14
。
编辑
我还想从插入符号位置开始插入一些元素。所以这是我的职责
selectStart = 0;
var update = function()
selectStart = getCaretPosition(this);
;
function insertEmoji(svg)
input = $('div#text').html();
beforeCursor = input.substring(0, selectStart);
afterCursor = input.substring(selectStart, input.length);
emoji = '<img src="images/smiley/'+svg+'.png" class="emojiText" />';
$('div#text').html(beforeCursor+emoji+afterCursor);
【问题讨论】:
【参考方案1】:在Get a range's start and end offset's relative to its parent container 上查看Tim Down's 的答案。
尝试使用他拥有的函数来获取带有嵌套元素的选择索引,如下所示:
function getCaretCharacterOffsetWithin(element)
var caretOffset = 0;
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var sel;
if (typeof win.getSelection != "undefined")
sel = win.getSelection();
if (sel.rangeCount > 0)
var range = win.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
else if ( (sel = doc.selection) && sel.type != "Control")
var textRange = sel.createRange();
var preCaretTextRange = doc.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
caretOffset = preCaretTextRange.text.length;
return caretOffset;
var update = function()
console.log(getCaretCharacterOffsetWithin(this));
;
$('#text').on("mousedown mouseup keydown keyup", update);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="text">minubyv<img src="https://themeforest.net/images/smileys/happy.png" class="emojiText" />iubyvt</div>
我根据 Tim Down 编写了自己的函数,它的工作方式如您所愿。我将treeWalker
更改为过滤NodeFilter.ELEMENT_NODE
的NodeFilter.SHOW_TEXT
,现在<img/>
元素也在我们的循环中得到处理。我首先存储range.startOffset
,然后递归遍历所有选择树节点。如果它找到一个img
节点,那么它只在位置上加1;如果当前节点元素与我们的range.startContainer
不同,则添加该节点的长度。该位置由不同的变量lastNodeLength
更改,该变量在每个循环中添加到charCount
。最后,当 charCount
存在循环并且我们有正确的最终插入符号位置(包括图像元素)时,它会将 lastNodeLength
中剩余的所有内容添加到 charCount
。
最终的工作代码 (它在最后返回 14,完全符合它应该和你想要的)
function getCharacterOffsetWithin_final(range, node)
var treeWalker = document.createTreeWalker(
node,
NodeFilter.ELEMENT_NODE,
function(node)
var nodeRange = document.createRange();
nodeRange.selectNodeContents(node);
return nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ?
NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
,
false
);
var charCount = 0, lastNodeLength = 0;
if (range.startContainer.nodeType == 3)
charCount += range.startOffset;
while (treeWalker.nextNode())
charCount += lastNodeLength;
lastNodeLength = 0;
if(range.startContainer != treeWalker.currentNode)
if(treeWalker.currentNode instanceof Text)
lastNodeLength += treeWalker.currentNode.length;
else if(treeWalker.currentNode instanceof HTMLBRElement ||
treeWalker.currentNode instanceof HTMLImageElement /* ||
treeWalker.currentNode instanceof HTMLDivElement*/)
lastNodeLength++;
return charCount + lastNodeLength;
var update = function()
var el = document.getElementById("text");
var range = window.getSelection().getRangeAt(0);
console.log("Caret pos: " + getCharacterOffsetWithin_final(range, el))
;
$('#text').on("mouseup keyup", update);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="text">minubyv<img contenteditable="true" src="https://themeforest.net/images/smileys/happy.png" class="emojiText" />iubyvt</div>
【讨论】:
您的代码很酷,但我需要检测 div 的所有 html 内容,而不仅仅是文本,因为我将在插入符号位置的 div 中插入一些字符。看看我的问题编辑。 @doggiebrezy 我让它像你想要的那样工作。请参阅我的更新答案。我已经在最新的 Chrome 和 Firefox 上对其进行了测试。但它不适用于 IE。 感谢您的编辑,但请帮助我完成最后一件事。现在我想在插入符号位置插入一些文本或图像,所以我拆分了 div.html 但问题是假设插入符号位置是 11,插入的文本不会将该图像计为一个,而是整个 img.html 有放错了要插入的点,请你帮我计算一下 div.html 中有多少字符串,包括 img 元素 @doggiebrezy 我认为将某些内容(文本或图像)添加到所选内容的currentNode
会更容易。我会尽快找到时间的。
谢谢@christoslytras。我确实想出了一个办法。它完美无缺。非常感谢您的贡献,我很感激以上是关于如何获取包含图像的内容可编辑 div 的插入符号位置的主要内容,如果未能解决你的问题,请参考以下文章
通过 javascript 在 contenteditable div 上获取插入符号坐标。
如何使用 html 子元素在 contenteditable div 中获取插入符号位置?
如何使用 jQuery 在 contenteditable div 中移动插入符号?