Я хотел бы создать элемент contenteditable с CSS, установленным на white-space: pre-wrap, где поведение по умолчанию при нажатии Ввод состоит просто в вставке новой строки (тогда элемент textContent должен точносоответствует его внешнему виду).
Пройдя несколько попыток заставить это работать нехорошо, без ошибок, это все еще вызывает у меня огромные головные боли, потому что вставка новой строки в конце элемента не выполняет нет следующего:
- Сделать новую строку видимой даже при
white-space: pre-wrap - Разрешить пользователю размещать курсорв позиции новой строки
- Включение новой строки в элемент
textContent
На данный момент моя лучшая попытка заключается в следующем:
const insertNewline = e => {
e.preventDefault();
document.execCommand('insertHTML', false, '\n ');
document.execCommand('delete');
e.target.normalize();
};
Однако, кромебудучи хакером, неясно , почему это работает (почему вставка, а затем удаление неразрывного пробела дает желаемый эффект?) и, что более важно, она портит историю отмен элемента - нажмите Ctrl + Z eи вы в конечном итоге получите нежелательные .
Есть мысли о том, как улучшить это?