4

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

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

3
  • Уточните, пожалуйста, что значит с учётом положения курсора?
    – diralik
    9 сен 2017 в 20:38
  • @diraria а что это еще может значить?)
    – Cheg
    9 сен 2017 в 20:40
  • 1
    @diraria, это значит, что IMG вставляется ровно туда, где установлен курсор.
    – StasHappy
    9 сен 2017 в 20:52

1 ответ 1

5

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>

2
  • не плохо было бы еще и фокус сохранять
    – Cheg
    9 сен 2017 в 21:18
  • @Cheg, да, обновил
    – diralik
    10 сен 2017 в 6:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.