如何解决Exec命令InsertHTML不在内容可编辑Div标签的正确位置插入
我需要在内容可编辑div中使用insertHtml execCommand插入图像。检查下面的代码。
function createRange(node,chars,range) {
if (!range) {
range = document.createRange()
range.selectNode(node);
range.setStart(node,0);
}
if (chars.count === 0) {
range.setEnd(node,chars.count);
} else if (node && chars.count >0) {
if (node.nodeType === Node.TEXT_NODE) {
if (node.textContent.length < chars.count) {
chars.count -= node.textContent.length;
} else {
range.setEnd(node,chars.count);
chars.count = 0;
}
} else {
for (var lp = 0; lp < node.childNodes.length; lp++) {
range = createRange(node.childNodes[lp],range);
if (chars.count === 0) {
break;
}
}
}
}
return range;
}
function setCurrentCursorPosition(chars) {
if (chars >= 0) {
var selection = window.getSelection();
range = createRange(document.getElementsByTagName('div')[0].parentNode,{ count: chars });
if (range) {
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}
document.execCommand('inserthtml',false,'<br><img id="img1" alt="" src="https://assets.justinmind.com/wp-content/uploads/2019/04/wireframe-examples-web-and-mobile-header.png" style="width:100%;"><br>');
}
}
<div contenteditable="true">item 1<br>item 2<br><br>item 3<br>item 4<br>item 5<br>...</div>
<button id="addImage" type="button" onclick="setCurrentCursorPosition(24)">Add Image</button>
如您所见,图像未插入正确的位置。这是一个示例,但让我们假设用户将插入号设置在位置24,然后添加图像。该图像应插入到“项目4”部分的后面,但它在此之前插入字符,这意味着它正在考虑html部分,而不仅仅是文本,并将图像放在错误的部分。为什么?我在做什么错了?
解决方法
它将回车计数为字符。如果将光标位置更改为29,它将完全位于正确的位置。
如果您想查看它的运行情况,只需运行代码段,将光标置于项目1之前,然后按向右箭头键29次,您将紧随项目4之后
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。