вставить изображение в contenteditable div - PullRequest
Новая
       23

вставить изображение в contenteditable div

2 голосов
/ 13 марта 2019

Попытка вставить изображение в 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>

Ничего не происходит.Любая помощь?

Ответы [ 2 ]

1 голос
/ 13 марта 2019

insertImage требует URL изображения, и вы передаете объект файла. Ваш код фактически вставляет тег <img>, но без атрибута src, поэтому вы его не видите.

Вы можете получить URL изображения с помощью FileReader. Вот рабочий код для того, чего вы хотите достичь: 

$('#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);
});
0 голосов
/ 13 марта 2019

Я думаю, что мое решение должно иметь лучшую читаемость: 

<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>
...