Test

#editor { width: 98%; height: 10vw; border: 2px dashed orangered; padding: 5px; margin: 0px; } #preview .thumbnails { width: 125px; height: 125px; background-size: 100% 100%; display: inline-block; margin: 10px; border: 1px solid orangered; } [contenteditable=true]:empty:before { content: attr(placeholder); color: grey; display: block; /* For Firefox */ } <div id="editor" contenteditable="true" placeholder="What's happening?"></div> <div id="preview"></div> var editor = document.getElementById("editor"); var preview = document.getElementById("preview"); editor.addEventListener("input", function() { var image = this.getElementsByTagName('img')[0]; if(image != undefined){ preview.innerHTML += '<div class="thumbnails" style="background-image:url(\'' + image.src + '\')"></div>'; image.remove(); } }, false);

#editor {
  width: 98%;
  height: 10vw;
  border: 2px dashed orangered;
  padding: 5px;
  margin: 0px;
}
#preview .thumbnails {
  width: 125px;
  height: 125px;
  background-size: 100% 100%;
  display: inline-block;
  margin: 10px;
  border: 1px solid orangered;
}
[contenteditable=true]:empty:before {
  content: attr(placeholder);
  color: grey;
  display: block;
  /* For Firefox */
}

<div id="editor" contenteditable="true" placeholder="What's happening?"></div>
<div id="preview"></div>

var editor = document.getElementById("editor");
var preview = document.getElementById("preview");

editor.addEventListener("input", function() {
  var image = this.getElementsByTagName('img')[0];
  if(image != undefined){
    preview.innerHTML += '<div class="thumbnails" style="background-image:url(\'' + image.src + '\')"></div>';
    image.remove();
  }
}, false);