Question

我正在尝试将html添加到特定光标位置的内容可编辑div。插入工作正常，但是，当需要将光标放在新插入的html之后，会引发异常。

这是我的jQuery扩展：

$.fn.extend({
insertTextAtCaret: function (content) {
    var contentLength = 0;
    if (content.indexOf("<") == 0) {
        $(content).each(function (i) {
            contentLength += $($(content)[i]).text().length;
        });
    }
    else
        contentLength = content.length;
    console.log(contentLength);
    var position = window.getSelection().getRangeAt(0).startOffset;
    var innerHtml = $(this).html();
    var pre = innerHtml.substring(0, position);
    var post = innerHtml.substring(position, innerHtml.length + (contentLength - 1));
    if (position == innerHtml.length && content == "\n")
        content += content;
    $(this).html(pre + content + post);
    var remove = $(this).find("a.remove-placeholder");
    if (remove)
        remove.click(function () {
            $(this).parent().remove();
        });
    var textNode = $(this)[0].firstChild;
    var range = document.createRange();
    range.setStart(textNode, position + contentLength);
    range.setEnd(textNode, position + contentLength);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);

}

}）;

这是我的控制：

var editableDiv = div.find("#command-expectedResult-" + uuid);
editableDiv.insertTextAtCaret("<span class=\"remove-placeholder-wrapper\" contenteditable=\"false\"><span>[PLACEHOLDER]</span><a class=\"remove-placeholder\">X</a></span>");

所以异常

在Uncaught IndexSizeError: Failed to execute 'setStart' on 'Range': The offset 21 is larger than or equal to the node's length (7).上引发了{p> range.setStart。

我认为这与以下事实有关：在光标位置插入html后，在尝试设置范围时，长度现在超出界限。

有关如何解决此问题的任何帮助吗？

将html插入内容可编辑div

0 个答案: