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

Answer 2

我认为我的解决方案应该具有更好的可读性：

<input type='file' id='inpfile' accept="image/jpeg, image/png, image/gif">
<br><br>
<div id="target">
    lorem ipsum
</div>
<script>
   $( document ).ready(function(){
      $('#inpfile').on('change', function(){
         var targetDiv=document.getElementById("target");
         var file = $(this).prop('files')[0];
         var img=document.createElement("img");
         var reader  = new FileReader();
         targetDiv.append(img);
         reader.addEventListener("load", function () {
            img.src=reader.result;
         }); 
         if (file)
            reader.readAsDataURL(file);
        });
   })
</script>

在 contenteditable div 中插入图片

insert image inside a contenteditable div

javascript

jquery

image

contenteditable