Как рассчитать координаты x, y моего курсора при редактировании contenteditable div?

Question

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

Для этого мне нужно знать, где находится курсор (а не мышь - вертикальная линия, из которой выходят буквы) всякий раз, когда это происходит. Как я могу это сделать?

Answer 1

Если я понимаю, что вы имеете в виду правильно, вы можете вставить какой-нибудь элемент div в элемент [contenteditable] на основе позиции курсора.

Если значение true, вы можете попробовать это следующим образом:

function append(node) {
  var sel = window.getSelection();
  var range = sel.getRangeAt(0);
  range.deleteContents();
  range.insertNode(node);
}

add.addEventListener('click', function () {
  var node = document.createElement('div');
  node.innerText = 'foo';
  node.className = 'test';
  
  append(node);
});

[contenteditable] {
  border: 1px solid #ccc;
}

.test {
  color: #f00;
  display: inline-block;
}

<div contenteditable>Hello world!</div>
<button type="button" id="add">Append text</button>

В этом примере вы можете щелкнуть редактор, чтобы установить положение курсора, а затем нажать кнопку, чтобы добавить новый тег div.

---

Вы также можете использовать этот способ для добавления некоторого тега div с помощью input или keypress или keydown ... событий путем обнаружения символа, например: @ #