Вставка IMG в DIV contenteditable

let editable = document.getElementById('editable'); 
document.querySelector('button').addEventListener('mousedown', onclick); 
 
function onclick(event) { 
  event.preventDefault(); // чтобы #editable не терял фокус 
  insertImage(); 
} 
 
function insertImage() { 
  let image = document.createElement('img'); 
  image.src = "http://placehold.it/20x20"; 
  selection = window.getSelection(); 
  if (selection.rangeCount === 0 /* нет выделения */ || 
    // выделение лежит не в #conteneditable 
    !editable.contains(selection.getRangeAt(0).commonAncestorContainer)) { 
    // вставляем в конец элемента #editable 
    editable.appendChild(image); 
  } else { 
    let range = selection.getRangeAt(0); 
    // сжимаем range в его правый конец 
    range.collapse(false); 
    // вставляем картинку 
    range.insertNode(image); 
 
    // делаем, чтобы курсор был после вставленной картинки 
    selection.removeAllRanges(); 
    range.setStartAfter(image); 
    selection.addRange(range); 
  } 
}

#editable { 
  background-color: cornsilk; 
}

<button>Добавить картинку</button> 
<div id="editable" contenteditable>Редактируемый элемент</div>