Вставка IMG в DIV contenteditable

#javascript #contenteditable

Хочу вставить IMG смайлик в редактируемый DIV с учётом положения курсора, используя
чистый JS (без jquery). В ходе полуторачасового поиска в интернете, так и не смог найти
нормальный пример. Неужели это такая невыполнимая задача?

У меня есть в бэкапах рабочий пример, но он исключительно для TEXTAREA. К редактируемому
блоку с атрибутом contenteditable он не подходит.
    

Ответы

Ответ 1

Получаем выделение с помощью метода Window::getSelection
Проверяем, выделено ли что-нибудь с помощью свойства Selection::rangeCount
Получаем первый диапазон выделения с помощью метода Selection::getRangeAt
Вставляем изображение в конец диапаозона с помощью метода Range::insertNode
Статья по теме на learn.javascript.ru




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

Редактируемый элемент