Как изменять содержимое contenteditable блока в режиме реального времени?

Question

[Богдан Кучерук]

Есть блок:

<div contenteditable="true" id="editable-block" style="border:1px solid white; height: 500px;"></div>

Пробую изменить его содержимое при вводе:

const editableBlock = document.getElementById('editable-block');
editableBlock.addEventListener('input', function() {
  const editableBlock = document.getElementById('editable-block');

// Запоминаем текущую позицию курсора
const selection = window.getSelection();
const range = selection.getRangeAt(0);
const startContainer = range.startContainer;
const startOffset = range.startOffset;

// Обновляем содержимое элемента
editableBlock.innerHTML = editableBlock.innerHTML + '!';

// Восстанавливаем позицию курсора
const newRange = document.createRange();
newRange.setStart(startContainer, startOffset);
newRange.setEnd(startContainer, startOffset);
selection.removeAllRanges();
selection.addRange(newRange);
});

Почему курсор всегда сбрасывается и как это исправить?

Answer 1

[Алексей Уколов]

Сбрасывается он потому, что startContainer - это дочерний текстовый узел элемента #editable-block. И когда вы перезаписываете innerHTML, вы этот startContainer из документа изымаете и восстанавливать позицию курсора просто некуда.

Есть простые, но ограниченные решения:

• Не убивать существующую текстовую ноду, а редактировать её текст:
  

  editableBlock.childNodes[0].textContent = editableBlock.textContent + "!"

  
  
• Указывать в newRange новый элемент:
  

  editableBlock.innerHTML = editableBlock.innerHTML + "!";
  startContainer = editableBlock.childNodes[0];

  
  
  

Они подразумевают, что у вас содержимым блока является только текст, без HTML.

UPD: Нет, есть же и нормальное универсальное решение:

const editableBlock = document.getElementById("editable-block");

editableBlock.addEventListener("input", function (event) {
  // Запоминаем текущую позицию курсора
  const selection = window.getSelection();

  const {startContainer, startOffset} = selection.getRangeAt(0);

  // Обновляем содержимое элемента
  startContainer.textContent = startContainer.textContent.substr(0, startOffset) + "!" + startContainer.textContent.substr(startOffset);

  // Восстанавливаем позицию курсора
  const newRange = document.createRange();
  newRange.setStart(startContainer, startOffset + 1);
  newRange.setEnd(startContainer, startOffset + 1);
  selection.removeAllRanges();
  selection.addRange(newRange);
});

Тут мы редактируем текстовое содержимое именно того элемента, в котором в данный момент находится курсор (это по определению всегда текстовая нода). И тогда содержимое основного блока может быть любым.

Comments

[Богдан Кучерук]

Как это исправить?

[Богдан Кучерук]

Нужна именно замена содержимого этого блока.

[Алексей Уколов]

Богдан Кучерук, нет, скорее всего, вам не нужна "именно замена содержимого этого блока".

[Богдан Кучерук]

Алексей Уколов, я хочу сделать хєштеги как в фейсбук или твиттере но ни одна попытка не увенчалась успехом. Пробовал разные подходы, но ничего не помогло.

[Богдан Кучерук]

Алексей Уколов, в любом случае огромное спасибо!

[Алексей Уколов]

Богдан Кучерук, ну, если ограничиться только подсветкой хэштегов, то можно сделать так: https://codepen.io/alexey-m-ukolov/pen/gOBGeGG

Задача же реализации нормального WYSIWYG, как вам уже сказали, сложна даже для очень опытных разработчиков.

[Богдан Кучерук]

Алексей Уколов, в вашем примере не работает перевод строки. У меня также получилось. Та я его почти доделал, только хэштеги остались. Ну я могу их сделать на php, хотел сделать лучше для пользователя, но проблема с курсором всегда.