Как я могу хранить атрибуты «данных» в узле внутри контейнера contentEditable?

Question

Я создаю mention систему для комментариев, аналогичную Facebook, но я не могу понять, как сохранить идентификатор упоминания.

Итак, у меня есть это:

<div contenteditable>
  <span data-id="123">Peter</span> is a good person
</div>

Однако при просмотре фактического HTML-кода, сгенерированного браузером , он полностью удаляет атрибут data-id:

<div contenteditable>
  <span>Peter</span> is a good person
</div>

Какой здесь правильный подход?

Answer 1

data- атрибуты видимы в DOM при нормальных обстоятельствах, и для доступа к ним вам нужно нацелиться на dataset этого элемента в JS.

Например,

let div = document.getElementById('span');

console.log(div.dataset);

<div contenteditable>
  <span id="span" data-id="123">Peter</span> is a good person
</div>