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

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;
}