Установить позицию каретки предсказуемой в contenteditable с подстрокой, замененной элементом изображения - PullRequest
Новая
       37

Установить позицию каретки предсказуемой в contenteditable с подстрокой, замененной элементом изображения

0 голосов
/ 12 января 2019

У меня есть спорный див. в котором, если я наберу :), то он должен заменить это на смайлики, если появится другой текст. когда я печатаю :), курсор перемещается влево от изображения. затем я вручную установил позицию каретки до конца. Это нормально работает, если мы продолжим писать, но если я вернусь и попытаюсь вставить эмодзи между текстом, позиция каретки переместится в конец. 

const el = document.getElementById('user-input');
  el.addEventListener("input", function (e) {
    el.innerHTML = el.innerHTML.replace(/:\)/g, `<img src=${emojis[':)']} alt=""/>`)
    el.innerHTML = el.innerHTML.replace(/(?:<|&lt;)3/g, `<img src=${emojis['<3']} alt=""/>`)
    setCaretToEnd(el)
  }, false);

функция setCaretToEnd 

 function setCaretToEnd(target) {
  const range = document.createRange();
  const sel = window.getSelection();
  if (target.childNodes.length) {
    for (let i = 0; i < target.childNodes.length; i++) {
      if (target.childNodes[i].nodeName === 'IMG') {
        range.setStartAfter(target.childNodes[i], target.childNodes[i].length)
      } else {
        range.setEnd(target.childNodes[i], target.childNodes[i].length)
      }
    }
  } else {
    range.setStart(target.childNodes[0], target.childNodes[0].length)
  }
  // range.selectNodeContents(target);
  range.collapse();
  sel.removeAllRanges();
  sel.addRange(range);
  target.focus();
  range.detach();
}

функция setCaretToEnd () довольно грязная, пытаясь использовать другой подход

1: установка позиции каретки всегда должна позволять писать новый текст 2: когда :) написано, каретка должна появиться справа от изображения

как заставить это работать.

...