javascript - 在 contenteditable div 中插入图像

Question

尝试在 div 内插入图像，位于 lorem 和 ipsum 之间:

$('#inpfile').on('change', function(){
	var img = $(this).prop('files')[0];
	document.execCommand('insertImage', img);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type='file' id='inpfile' accept="image/jpeg, image/png, image/gif">
<br><br>
<div contenteditable>
lorem ipsum
</div>

什么也没发生。有什么帮助吗？

Answer 1

insertImage 需要一个图像 URL，并且您正在传递一个文件对象。您的代码实际上插入了 <img>标签但没有 src属性，这就是您看不到它的原因。

您可以使用 FileReader 检索图像 URL。这是您想要实现的目标的工作代码:

$('#inpfile').on('change', function(){
    var file = $(this).prop('files')[0];
    var reader  = new FileReader();

    reader.addEventListener("load", function () {
        document.execCommand('insertImage', false, reader.result);
    }, false);

    if (file)
        reader.readAsDataURL(file);
});