时间戳

首页 > 解决方案 > 执行命令 InsertHTML 未插入内容可编辑 Div 标记的正确位置

javascript - 执行命令 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], chars, 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 部分，而不仅仅是文本，并将图像放置在错误的部分。为什么？我究竟做错了什么？

标签： javascripthtmldom

解决方案

它将回车计算为字符。如果您将光标位置更改为 29，它将完全位于正确的位置。

如果您想查看它的实际效果，只需运行您的代码片段，将光标放在第 1 项之前，然后按向右箭头键 29 次，您就会在第 4 项之后

推荐阅读