Question

我想在光标的当前位置插入一个图像，但是用我的当前代码显示：[object HTMLImageElement]而不是显示实际图像。这就是我所拥有的：

handleImage(picture){
        var image = document.createElement("img");
        image.setAttribute('src', picture.url!);
        image.setAttribute('alt', picture.altText!);
        image.setAttribute('id', picture.id!.toLocaleString());
        var selection = document.getSelection()!;
        var cursorPos = selection.anchorOffset;
        var oldContent = selection.anchorNode.nodeValue!;
        var newContent = oldContent.substring(0, cursorPos) + image + oldContent.substring(cursorPos);
        selection.anchorNode.nodeValue = newContent;
    }

我认为问题在于设置var newContent的位置。我不确定如何使其显示img而不是显示：[object HTMLImageElement]

Answer 1

您正在尝试将图像与字符串组合在一起。那是行不通的，因为JS进行隐式类型转换。当您执行myStr + image时，它实际上与myStr + image.toString()相同。 [object HTMLImageElement]是图像元素的字符串表示形式。您尝试执行的操作有很多未知事项（您要插入文本字段吗？选定的文本吗？），但这是一个基本的解决方案：

handleImage(picture){
        var selection = document.getSelection()!;
        var cursorPos = selection.anchorOffset;
        var oldContent = selection.anchorNode.nodeValue!;
        var newContent = oldContent.substring(0, cursorPos) + `<img src="${picture.url}" alt="${picture.altText}" id="${picture.id!.toLocaleString()}">` + oldContent.substring(cursorPos);
        selection.anchorNode.parentElement.innerHTML = newContent;
}

在javascript的光标位置插入图像-显示[object HTMLImageElement]而不是图像

1 个答案: